一觉睡醒从3到5,必须发文
侃侃
大家应该都发现了,自己的等级提高了,我本来不怎么关注这件事情。(我只关注奖品)😆。但是看到一下子升了两级确实还是有点激动了这不我准备写一个hover属性的全集特效来庆祝一下。
展示
本次是第一篇,效果请看演示。
动画演示
hover介绍
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
hover和onmouseover的区别
hover : 悬停可以指定两个函数功能1和功能2,鼠标移入触发功能1,移除触发函数2;
mouseover :不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件。 mouseenter :只有在鼠标指针穿过被选元素时,才会触发mouseenter事件。
这样的话,的mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。
mouseout : 不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。
mouseleave : 只有在鼠标指针离开被选元素时,才会触发mouseleave事件。
综合所有:的mouseenter和鼠标离开定位更加精准,而鼠标悬停和鼠标移开时则会带动子元素一起改变
技术介绍
.ih-item.circle.effect1 .spinner {
width: 230px;
height: 230px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 10px;
bottom: 0;
left: 10px;
right: 0;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 a:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 a:hover .info {
opacity: 1;
}
资源下载
转载自:https://juejin.cn/post/7125959005767204871