html c3效果,使用c3动画实现摇铃铛效果

使用c3动画实现摇铃铛效果

ui小姐姐想给通知栏目添加一个摇铃铛效果，好久没用c3的我太菜了，没搞完美，最后还是UI小姐姐制作了一个gif图，哈哈。

下面安排一个完美的纯css实现的摇铃铛效果，随便在阿里字体库找了一个铃铛下载了png

附代码

.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);

}

}

DEMO下载

蓝奏云盘：点击下载

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓