likes
comments
collection

一觉睡醒从3到5,必须发文

作者站长头像
站长
· 阅读数 12

侃侃

大家应该都发现了,自己的等级提高了,我本来不怎么关注这件事情。(我只关注奖品)😆。但是看到一下子升了两级确实还是有点激动了这不我准备写一个hover属性的全集特效来庆祝一下。

展示

本次是第一篇,效果请看演示。

动画演示

一觉睡醒从3到5,必须发文

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

资源下载

一觉睡醒从3到5,必须发文

一觉睡醒从3到5,必须发文