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

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓

html c3效果,使用c3动画实现摇铃铛效果相关推荐

使用c3动画实现摇铃铛效果
使用c3动画实现摇铃铛效果 ui小姐姐想给通知栏目添加一个摇铃铛效果,好久没用c3的我太菜了,没搞完美,最后还是UI小姐姐制作了一个gif图,哈哈. 下面安排一个完美的纯css实现的摇铃铛效果,随便在 ...
JQuary效果（自定义动画，王者荣耀效果案例）
一,自定义动画自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() 语法规范如下: 1,语法 animate(params,[speed],[easing],[fn]) ...
微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
Unity3D 4.x怎样实现动画的Ping Pong效果
近期在看Unity官方的Stealth项目教学视频.视频使用的是Unity旧的版本号,而我如今正在使用的是Unity 4.5,动画系统的操作全然不同了.依照视频的方式根本无法设置动画的Ping Pin ...
iOS开发之各种动画各种页面切面效果
转发:http://www.cocoachina.com/ios/20141226/10775.html 今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发 ...
26_ue4进阶末日生存游戏开发[僵尸添加动画和扣血效果]
给僵尸npc添加动画和扣血效果首先新建一个动画文件夹新建一个动画蓝图一般只要是不做汽车啊等模型,我们一般选Animinstance 因为僵尸是女英雄,所以我们选择女英雄的动画重命名Zombie ...

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

html c3效果,使用c3动画实现摇铃铛效果相关推荐

最新文章

热门文章