专注前端行业精选
使用c3动画实现摇铃铛效果
作者:鹏仔先生日期:2020-06-16 16:08:51浏览:5563分类:CSS
使用c3动画实现摇铃铛效果
ui小姐姐想给通知栏目添加一个摇铃铛效果,好久没用c3的我太菜了,没搞完美,最后还是UI小姐姐制作了一个gif图,哈哈。
下面安排一个完美的纯css实现的摇铃铛效果,随便在阿里字体库找了一个铃铛下载了png
相关推荐 css3变形 http://www.sharedbk.com/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下载
蓝奏云盘:点击下载
猜你还喜欢
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 12-28 PHP的语法
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
- 04-30 object-fit:cover;在小程序中不起作用,小程序图片变形了如何处理
- 04-26 (安卓/IOS)APP调用H5事件,H5调用APP事件
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有3位网友发表了看法:
访客 评论于 [2020-06-16 19:49:03] 回复
鹏仔牛逼
访客 评论于 [2020-06-16 19:36:17] 回复
不错,解决了我的问题
小小 评论于 [2020-06-16 19:36:10] 回复
奥利给