返回顶部
首页 > 资讯 > 精选 >如何使用CSS Transitions实现圆形悬停效果
  • 891
分享到

如何使用CSS Transitions实现圆形悬停效果

2023-06-08 07:06:21 891人浏览 独家记忆
摘要

小编给大家分享一下如何使用CSS Transitions实现圆形悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在线预览 下载源码在今天的教程中,我们将在圆上试验悬停效果。 自从有了border- radius属性,

小编给大家分享一下如何使用CSS Transitions实现圆形悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

在线预览 下载源码

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

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

那么,让我们开始吧!

HTML结构

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

<ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h4>Use what you have</h4><p>by Angela Duncan <a href="Http://drbl.in/eOPF">View on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h4>Common Causes of Stains</h4><p>by AntoNIO F. MondraGon <a href="http://drbl.in/eKMi">View on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-3"><div class="ch-info"><h4>Pink Lightning</h4><p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p></div></div></li></ul>

虽然我们可以在这里使用图像,但我们会通过使用背景图像来给自己更多的选择。 我们将在以“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

如何使用CSS Transitions实现圆形悬停效果

第一个例子是通过缩放来揭示描述,我们还将为".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 h4 {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

如何使用CSS Transitions实现圆形悬停效果

此示例中的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 h4 {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

如何使用CSS Transitions实现圆形悬停效果

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

<li><div class="ch-item"><div class="ch-info"><h4>Music poster</h4><p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p></div><div class="ch-thumb ch-img-1"></div></div></li>

".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 h4 {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

如何使用CSS Transitions实现圆形悬停效果

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

<li><div class="ch-item ch-img-1"><div class="ch-info-wrap"><div class="ch-info"><div class="ch-info-front ch-img-1"></div><div class="ch-info-back"><h4>Bears Type</h4><p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p></div></div></div></div></li>

如您所见,我们将背景图像添加到".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 h4 {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

如何使用CSS Transitions实现圆形悬停效果

在此示例中,我们希望将".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 h4 {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-item:hover .ch-info-front {transform: scale(0);opacity: 0;}

".ch-info-back"将缩小为1并淡入。我们还将pointer event事件设置为auto,因为现在我们希望能够单击链接:

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

示例6

如何使用CSS Transitions实现圆形悬停效果

在此示例中,我们希望向下翻转内部".ch-thumb"部分以显示描述。 HTML将与前两个示例中的相同。

".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;}

The common style of the wrapper and the description element:

".ch-info-wrap", ".ch-info"元素的通用样式:

.ch-info-wrap, .ch-info{position: absolute;width: 180px;height: 180px;border-radius: 50%;transition: all 0.4s ease-in-out;}

".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);perspective: 800px;}

".ch-info"元素需要以下转换样式:

.ch-info {transform-style: preserve-3d;}

正面和背面将有一个过渡。 请注意,这次我们不会将backface-visibility设置为hidden,因为我们希望".ch-thumb"的背面在我们向下翻转时显示:

.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;transition: all 0.6s ease-in-out;}

让我们设置正确的transform-origin,以便我们可以打开它:

.ch-info .ch-info-front {transform-origin: 50% 100%;z-index: 100;box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1);}

我们将为".ch-info-back"设置一个0不透明度的RGBA值:

.ch-info .ch-info-back {background: rgba(230,132,107,0);}

和其他元素的通常风格:

.ch-img-1 { background-image: url(../images/16.jpg);}.ch-img-2 { background-image: url(../images/17.jpg);}.ch-img-3 { background-image: url(../images/18.jpg);}.ch-info h4 {color: #fff;text-transform: uppercase;letter-spacing: 2px;font-size: 14px;margin: 0 25px;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-item:hover .ch-info-front {transform: rotate3d(1,0,0,-180deg);box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3);}.ch-item:hover .ch-info-back {background: rgba(230,132,107,0.6);}

示例7

如何使用CSS Transitions实现圆形悬停效果

最后一个示例将像旋转立方体一样,我们通过从顶部向后旋转它来显示描述。 由于我们将旋转每个面,因此我们不需要额外的父级元素。 因此,我们的HTML将如下所示:

<li><div class="ch-item"><div class="ch-info"><div class="ch-info-front ch-img-1"></div><div class="ch-info-back"><h4>Mouse</h4><p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p></div></div></div></li>

我们将为".ch-item"提供透视值:

.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;cursor: default;perspective: 900px;}

".ch-info"将需要preserve-3d值:

.ch-info{position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;}

正面和背面将具有过渡,变换原点将设置为50%0%:

.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;transition: all 0.4s linear;transform-origin: 50% 0%;}

让我们为前面部分设置一个漂亮的内阴影:

.ch-info .ch-info-front {box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);}

背面将在最初旋转,以显示为立方体的下表面:

.ch-info .ch-info-back {transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);background: #000;opacity: 0;}

背景图像和文本元素的通常风格:

.ch-img-1 { background-image: url(../images/19.jpg);}.ch-img-2 { background-image: url(../images/20.jpg);}.ch-img-3 { background-image: url(../images/21.jpg);}.ch-info h4 {color: #fff;text-transform: uppercase;letter-spacing: 2px;font-size: 24px;margin: 0 15px;padding: 60px 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);}

我们将使用translate3d在3d空间的Y轴上移动前部,并使用rotate3d实际旋转它。 我们也会淡出它,因为我们之后不希望看到它的任何部分:

.ch-item:hover .ch-info-front {transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);opacity: 0;}

背面将“向后”旋转到0度(记住,最初它向下旋转):

.ch-item:hover .ch-info-back {transform: rotate3d(1,0,0,0deg);opacity: 1;}

看完了这篇文章,相信你对“如何使用CSS Transitions实现圆形悬停效果”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 如何使用CSS Transitions实现圆形悬停效果

本文链接: https://lsjlt.com/news/252499.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用CSS Transitions实现圆形悬停效果
    小编给大家分享一下如何使用CSS Transitions实现圆形悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在线预览 下载源码在今天的教程中,我们将在圆上试验悬停效果。 自从有了border- radius属性,...
    99+
    2023-06-08
  • css如何实现悬停效果
    这篇文章给大家分享的是有关css如何实现悬停效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。悬停效果悬停效果通常用于按钮、文本链接、站点的块部分、图标等。如果您想在有人将鼠标悬停在其上时更改颜色,只需使用相同的...
    99+
    2023-06-27
  • 如何使用css实现圆形波浪效果图
    这篇文章将为大家详细讲解有关如何使用css实现圆形波浪效果图 ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用...
    99+
    2023-06-08
  • 怎么用css实现圆形效果
    本篇内容主要讲解“怎么用css实现圆形效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用css实现圆形效果”吧! 在CSS3中,动画效果使用animat...
    99+
    2024-04-02
  • 如何利用纯css实现缩略图悬停效果
    小编给大家分享一下如何利用纯css实现缩略图悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!缩略图悬停效果如下:源码:<!doctype html><html><head>...
    99+
    2023-06-08
  • CSS如何实现图片列表悬停放大效果
    小编给大家分享一下CSS如何实现图片列表悬停放大效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:<!DOCTY...
    99+
    2024-04-02
  • CSS如何实现图片鼠标悬停折叠效果
    这篇文章给大家分享的是有关CSS如何实现图片鼠标悬停折叠效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS 实现 图片鼠标悬停折叠效果1. 实现要点 折叠是由多个块级元素来完成的;图片是以背景图片...
    99+
    2023-06-08
  • 如何通过CSS实现鼠标悬停时的特效效果
    CSS是一种用于美化和定制网页的样式表语言,它可以使我们的网页更加生动和吸引人。其中,通过CSS实现鼠标悬停时的特效效果是一种常见的方式,可以为网页添加一些互动和动态性。本文将介绍一些常见的悬停特效,并提供相应的代码示例。高亮背景色当鼠标悬...
    99+
    2023-10-21
    CSS特效 实现 鼠标悬停
  • CSS怎么实现鼠标悬停tip效果
    这篇文章主要介绍“CSS怎么实现鼠标悬停tip效果”,在日常操作中,相信很多人在CSS怎么实现鼠标悬停tip效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS怎么实现鼠...
    99+
    2024-04-02
  • css如何实现半圆效果
    css实现半圆效果的方法:1.通过“border-radius”属性设置边框的4个角实现半圆效果,需要在css中添加样式代码,比如语法样式为:“border-radius: 100px 100px 0 0;”设置边框左上角为100px、右上...
    99+
    2024-04-02
  • css如何实现圆角效果
    小编给大家分享一下css如何实现圆角效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!圆角效果  css3 新功能中最常用的一项是圆角效果,标准 HTML 方块对...
    99+
    2023-06-27
  • 纯CSS怎么实现按钮的悬停效果
    这篇文章主要为大家展示了纯CSS怎么实现按钮的悬停效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“纯CSS怎么实现按钮的悬停效果”这篇文章吧。   代码解读 ...
    99+
    2024-04-02
  • 怎么用纯CSS实现小球变矩形背景的按钮悬停效果
    这篇文章主要介绍了怎么用纯CSS实现小球变矩形背景的按钮悬停效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   代码解读   定义d...
    99+
    2024-04-02
  • 怎么使用纯CSS实现圆形导航菜单效果
    小编给大家分享一下怎么使用纯CSS实现圆形导航菜单效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!直接上代码css:body {    background-color:...
    99+
    2023-06-14
  • 如何使用CSS实现鼠标悬停提示
    这篇文章主要为大家展示了“如何使用CSS实现鼠标悬停提示”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CSS实现鼠标悬停提示”这篇文章吧。这是一款比较漂...
    99+
    2024-04-02
  • javascript如何实现鼠标悬停变色效果
    本篇文章给大家分享的是有关javascript如何实现鼠标悬停变色效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。javascript实现鼠...
    99+
    2024-04-02
  • css如何实现鼠标悬停元素逆时针旋转效果
    小编给大家分享一下css如何实现鼠标悬停元素逆时针旋转效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在css中,可以利用“:...
    99+
    2024-04-02
  • 如何使用纯CSS实现圆形图像?
    小编给大家分享一下如何使用纯CSS实现圆形图像?,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   SS可以实现网页中的很多效...
    99+
    2024-04-02
  • 如何使用CSS实现圆形进度条
    这篇文章主要介绍了如何使用CSS实现圆形进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   首先一个父级div设置相对定位,内部含有...
    99+
    2024-04-02
  • 怎么用CSS实现图片列表悬停放大效果
    这篇文章主要讲解了“怎么用CSS实现图片列表悬停放大效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用CSS实现图片列表悬停放大效果”吧!代码如下:&...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作