CSS3 动画:水平翻转

qkkyhovd 发布于 2015/08/24 17:33
阅读 1K+
收藏 0

首先,我们在网页里面放置 3 个图标。


css3

相应的 html 代码为:

<span class="mega-octicon octicon-mortar-board anim-flip"></span>
<span class="mega-octicon octicon-eye anim-flip"></span>
<span class="mega-octicon octicon-globe anim-flip"></span>

然后,我们做一个特效:当鼠标滑过图标时,让这几个图标水平翻转。

CSS3水平翻转

.anim-flip:hover {
    animation: 0.35s linear 0s alternate none 1 featuresicon;
    -webkit-animation: 0.35s linear 0s alternate none 1 featuresicon;
    color: #4183C4;
}
@keyframes featuresicon { 
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@-webkit-keyframes featuresicon { 
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

如需在 CSS3 中创建动画,需要使用 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

animation: 0.35s linear 0s alternate none 1 featuresicon;

上面的这一行,我们定义了 featuresicon 规则。由于不同浏览器对 CSS3 的支持不同,因此我们在下面的代码中,定义了 2 个 @keyframes 规则。

transform 用来进行 2D 和 3D 转换。通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。

因此,我们使用:

50% {
   transform: scaleX(0);
}
100% {
   transform: scaleX(1);
}

可以实现水平翻转。

加载中
返回顶部
顶部