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

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

2021-09-04 1062人已围观

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

本文介绍了

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

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

那么，让我们开始吧！

HTML结构

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

Use what you have
by Angela Duncan View on Dribbble
Common Causes of Stains
by Antonio F. Mondragon View on Dribbble
Pink Lightning
by Charlie Wagers View on Dribbble

虽然我们可以在这里使用图像，但我们会通过使用背景图像来给自己更多的选择。我们将在以“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); transform: rotate(-110deg); } .ch-item:hover .ch-info p a{ opacity: 1; transform: translateX(0px) rotate(0deg); }

示例4

第四个例子将涉及一些3D旋转。因此，我们需要调整结构，以便有一个容器用于透视和前面和后面。因此，列表项将如下所示：


Bears Type
by Josh Schott View on Dribbble

如您所见，我们将背景图像添加到".ch-item"以及".ch-info-front"。诀窍是给".ch-info-wrap"提供相同的背景。

这将产生幻觉，好像我们的".ch-item"有一个洞。

".ch-item"将具有以下的样式：

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

".ch-info-wrap"将有透视属性，我们还将添加阴影的过渡：

 .ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }

".ch-info"将需要preserve-3d值用于变换样式，我们将给它一个过渡，因为这是我们将在3d中旋转的元素：

 .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; }

正面和背面将具有以下常见样式：

 .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden; }

背面将旋转，以便我们开始不会看到它：

 .ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); background: #000; }

再次，背景图片：

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

...和文本元素：

 .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; 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); }

在悬停时，我们将更改".ch-info-wrap"的阴影并旋转".ch-info"，以便我们看到背面：

 .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg); }

示例5

在此示例中，我们希望将".ch-thumb"缩小为0，并通过将其淡入并将其缩小为1来显示".ch-info"。第五示例的结构与前一示例中的相同。

该".ch-item"具有以下的风格：

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

".ch-info-wrap"和".ch-info"将具有以下常见样式：

 .ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; }

让我们通过将相同的背景设置给".ch-info-wrap"来再次执行“漏洞”技巧：

 .ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }

常见的样式是“前面”和“背面”（它不再是正面和背面）：

 .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; }

“前面”将有一个过渡（它会缩小并消失）：

 .ch-info .ch-info-front { transition: all 0.6s ease-in-out; }

".ch-info-back"最初将具有0不透明度并且可以扩展到1.5：

 .ch-info .ch-info-back { opacity: 0; background: #223e87; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s; }

我们需要将pointer-events设置为none，因为我们不希望元素“阻塞”其他所有内容...记住，它被放大，我们因为它的不透明性而无法看到它，但它仍然存在。

像往常一样的背景图像和文本元素，只是有一些不同的颜色：

 .ch-img-1 { background-image: url(../images/13.jpg); } .ch-img-2 { background-image: url(../images/14.jpg); } .ch-img-3 { background-image: url(../images/15.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; 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 0; 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: #e7615e; 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: #fff; }

在悬停时，我们将缩小".ch-info-front"部分为0并将不透明度设置为0.这将使其消失在后面。

.ch-it

上一篇：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布局实现网格的流动