百变鹏仔-专注前端行业精选
使用c3动画实现摇铃铛效果
作者:鹏仔先生日期:2020-06-16 16:08:51浏览:5867分类:CSS
使用c3动画实现摇铃铛效果
ui小姐姐想给通知栏目添加一个摇铃铛效果,好久没用c3的我太菜了,没搞完美,最后还是UI小姐姐制作了一个gif图,哈哈。
下面安排一个完美的纯css实现的摇铃铛效果,随便在阿里字体库找了一个铃铛下载了png
相关推荐 css3变形 https://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下载
蓝奏云盘:点击下载
手机扫码访问
猜你还喜欢
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
- 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首行缩进不管用如何解决?
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有3位网友发表了看法:
访客 评论于 [2020-06-16 19:49:03] 回复
鹏仔牛逼
访客 评论于 [2020-06-16 19:36:17] 回复
不错,解决了我的问题
小小 评论于 [2020-06-16 19:36:10] 回复
奥利给