作者:爱吃肉肉的狼 | 来源:互联网 | 2023-05-19 19:00
首先,我们在网页里面放置 3 个图标。
相应的 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); }
可以实现水平翻转。