css3 animation和background-position制作动画效果(animation steps)
程序员文章站
2024-01-15 08:01:58
...
<style type="text/css">
.userimg {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 100%;
background: url(img/bg_base_spr24.png) no-repeat -100px 0;
vertical-align: top;
margin-right: 10px;
}
.userimg:hover {
border-color: #ffc52a;
-webkit-animation: wakeup .2s steps(3) both;
animation: wakeup .2s steps(3) both;
}
@-webkit-keyframes wakeup {
0% {
background-position: -100px 0;
}
100% {
background-position: -250px 0;
}
}
@keyframes wakeup {
0% {
background-position: -100px 0;
}
100% {
background-position: -250px 0;
}
}
</style>
</head>
<body>
<span class="userimg"></span>
</body>
animation: wakeup .2s steps(3) both;
动画总时长0.2s,在3帧之间切换
推荐阅读
-
css3 animation和background-position制作动画效果(animation steps)
-
基于CSS3的animation属性实现微信拍一拍动画效果
-
利用CSS3 animation动画属性实现轮播图效果的方法详解
-
基于CSS3 animation动画属性实现轮播图效果
-
CSS3 animation实现逐帧动画效果
-
基于CSS3 animation动画属性实现轮播图效果
-
用animation的steps属性制作帧动画
-
CSS3 animation实现逐帧动画效果
-
CSS3中translate、transform和translation,和动画animation实例讲解
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose