您现在的位置是：网站首页> 编程资料编程资料

使用CSS Transitions实现圆形悬停效果的示例代码深入探究CSS中Animations和Transitions的工作原理

2023-10-19 327人已围观

简介 这篇文章主要介绍了使用CSS Transitions实现圆形悬停效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文介绍了

在线预览下载源码

在今天的教程中，我们将在圆上试验悬停效果。 自从有了border- radius属性，我们可以创建圆形形状，并且它们作为设计元素更常出现在网站中。 我特别喜欢看到的一个用途是圆形缩略图，它看起来比通常的矩形更有趣。 因为圆是如此特殊的形状，我们将为它创造一些特殊的悬停效果！

我们将在本教程中省略浏览器前缀。 但你当然会在下载文件中找到它们。

那么，让我们开始吧！

HTML结构

对于大多数示例，我们将使用以下结构：

虽然我们可以在这里使用图像，但我们会通过使用背景图像来给自己更多的选择。 我们将在以“ch-img-”开头的类中定义它们。

现在，让我们做一些悬停效果吧！

CSS样式

让我们为列表和列表项定义一些常见的样式：

 .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; }

一些示例将具有不同的结构，但我们将更详细地研究每个示例。

示例1

第一个例子是通过缩放来揭示描述，我们还将为".ch-item"的内阴影设置动画。 所以让我们定位".ch-item"并设置一个漂亮的，内阴影和过渡：

 .ch-item { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }

正如您之前注意到的那样，我们已经为列表项提供了两个类：一个是ch-item，另一个用于定义特定的背景图像：

 .ch-img-1 { background-image: url(../images/1.jpg); } .ch-img-2 { background-image: url(../images/2.jpg); } .ch-img-3 { background-image: url(../images/3.jpg); }

".ch-info"将设置为绝对定位，我们将通过设置RGBA值为其提供半透明背景。 它的不透明度将设置为0，我们也将它缩小到0：

 .ch-info { position: absolute; background: rgba(63,147,147, 0.8); width: inherit; height: inherit; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); }

标题将具有一些padding和margin以及平滑的文本阴影：

 .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }

p元素的不透明度为0和一个过渡（我们希望在悬停时将其淡入但有延迟时间）：

 .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 1s ease-in-out 0.4s; }

链接将使用大写字母，我们将悬停颜色设置为黄色：

 .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }

现在，有趣的悬停动作！ ".ch-item"的内阴影的尺寸从16px设置为1px：

 .ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); }

".ch-info"将淡入并缩放到1：

 .ch-item:hover .ch-info { transform: scale(1); opacity: 1; }

描述的段落p将会淡入（延迟）：

 .ch-item:hover .ch-info p { opacity: 1; }

这是第一个例子！ 我们来看看下一个。

示例2

此示例中的HTML结构与第一个中的HTML结构相同。

在这个例子中，我们将使用".ch-item"的阴影来填充我们的圆并作为描述的背景。 所以，这里没什么特别的，只是多了一个阴影值：

 .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }

背景图像：

 .ch-img-1 { background-image: url(../images/4.jpg); } .ch-img-2 { background-image: url(../images/5.jpg); } .ch-img-3 { background-image: url(../images/6.jpg); }

".ch-info"将再次缩放：

 .ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden; }

让我们设计文本元素的风格：

 .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 65px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }

在悬停时，我们会将内阴影（偏红的阴影）设置为110px展开半径。 这将涵盖所有的圆：

 .ch-item:hover { box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); }

我们将缩放".ch-info"并淡化它：

 .ch-item:hover .ch-info { opacity: 1; transform: scale(1); }

示例3

在这个例子中，我们将使用旋转。 结构将与前两个示例略有不同，因为我们需要将".ch-thumb"添加为第二个分区。 所以列表项看起来如下：

  • Music poster
    by Jonathan Quintin View on Dribbble

    • ".ch-item"的样式将与之前一样（带有微妙的阴影）：

     .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

    ".ch-thumb"元素将具有特定的变换原点（位于右中间的某个位置）和过渡。 这将是我们想要在悬停时向下旋转的元素，以便它显示".ch-info"元素：

     .ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); transform-origin: 95% 40%; transition: all 0.3s ease-in-out; }

    使用伪类：创建一个带有径向渐变的小黄铜紧固件：

     .ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); }

    让我们为每个".ch-thumb"元素定义背景图像：

     .ch-img-1 { background-image: url(../images/7.jpg); z-index: 12; } .ch-img-2 { background-image: url(../images/8.jpg); z-index: 11; } .ch-img-3 { background-image: url(../images/9.jpg); z-index: 10; }

    ".ch-info"元素的样式如下：

     .ch-info { position: absolute; width: inherit; height: inherit; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); }

    文本元素将按以下方式定位和设置样式：

     .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }

    链接将是一个小圆圈，应该在悬停时从右侧移入：

     .ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transform: translateX(60px) rotate(90deg); } .ch-info p a:hover { background: rgba(255,255,255,0.5); }

    由于我们希望移动和不透明度发生延迟，但背景悬停没有过渡，我们将分离过渡。

    在悬停时，我们将旋转".ch-thumb"并移动/旋转链接元素：

     .ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); trans
                
                
    
                
    
                                            
    上一篇：4种灵活的Scss编译输出风格整理sass(scss）的安装与使用教程SCSS移动端页面遮罩层效果的实现及常见问题解决LESSCSS让CSS使用起来更加灵活成就CSS动态化动态的样式表lesscss:简单学习lesscss语法
    
                                                                
    下一篇：解析CSS中的Grid布局完全指南10分钟理解CSS3 Grid布局CSS Grid 网格布局全解析5分钟教你学会 CSS Grid 布局CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局使用CSS Grid布局实现网格的流动

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网