使用c3动画实现摇铃铛效果
作者:互联网
使用c3动画实现摇铃铛效果
ui小姐姐想给通知栏目添加一个摇铃铛效果,好久没用c3的我太菜了,没搞完美,最后还是UI小姐姐制作了一个gif图,哈哈。
下面安排一个完美的纯css实现的摇铃铛效果,随便在阿里字体库找了一个铃铛下载了png
相关推荐 css3变形 http://sharedblog.cn/post/131.html
附代码
<style>
.ld {
width: 60px;
height: 70px;
transform-origin: 50% 0;
animation: yaolingdang 3s infinite ease;
}
@keyframes yaolingdang {
5%,25%,45% {
transform: rotate(8deg);
}
0%,10%,30%,50% {
transform: rotate(-8deg);
}
15%,35%,55% {
transform: rotate(4deg);
}
20%,40%,60% {
transform: rotate(-4deg);
}
65%,100% {
transform: rotate(0deg);
}
}
</style>
<img class="ld" src="ld.png" alt="">
DEMO下载
蓝奏云盘:点击下载
标签:动画,rotate,小姐姐,transform,铃铛,c3,4deg 来源: https://blog.51cto.com/u_14209124/2884242