如何使用CSSTransitions实现圆形悬停效果-创新互联
小编给大家分享一下如何使用CSS Transitions实现圆形悬停效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联主营岢岚网站建设的网络公司,主营网站建设方案,
重庆APP软件开发,岢岚h5小程序开发搭建,岢岚网站营销推广欢迎岢岚等地区企业咨询
在线预览 下载源码
在今天的教程中,我们将在圆上试验悬停效果。 自从有了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 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
此示例中的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
在这个例子中,我们将使用旋转。 结构将与前两个示例略有不同,因为我们需要将".ch-thumb"添加为第二个分区。 所以列表项看起来如下:
".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
第四个例子将涉及一些3D旋转。 因此,我们需要调整结构,以便有一个容器用于透视和前面和后面。 因此,列表项将如下所示:
如您所见,我们将背景图像添加到".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
在此示例中,我们希望将".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
在此示例中,我们希望向下翻转内部".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
最后一个示例将像旋转立方体一样,我们通过从顶部向后旋转它来显示描述。 由于我们将旋转每个面,因此我们不需要额外的父级元素。 因此,我们的HTML将如下所示:
我们将为".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实现圆形悬停效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网页题目:如何使用CSSTransitions实现圆形悬停效果-创新互联
本文来源:http://pwwzsj.com/article/cddoop.html