小铃铛shake动画

小铃铛shake动画，css3代码（不会截gif图，sorry,效果还是不错的）

.shake{//不同浏览器 倾斜//-ms-transform:rotate(30deg); /* IE 9 *///-moz-transform:rotate(30deg); /* Firefox *///-webkit-transform:rotate(30deg); /* Safari and Chrome *///-o-transform:rotate(30deg); /* Opera *///抖动-webkit-animation: shake 2s ease infinite;animation: shake 2s ease infinite;transform-origin-x: 50%;transform-origin-y: 0;transform-origin-z: initial;
}
@-webkit-keyframes shake {0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}2% {-webkit-transform: rotate(15deg);transform: rotate(15deg);}4% {-webkit-transform: rotate(-18deg);transform: rotate(-18deg);}6% {-webkit-transform: rotate(18deg);transform: rotate(18deg);}8% {-webkit-transform: rotate(-22deg);transform: rotate(-22deg);}10% {-webkit-transform: rotate(22deg);transform: rotate(22deg);}12% {-webkit-transform: rotate(-18deg);transform: rotate(-18deg);}14% {-webkit-transform: rotate(18deg);transform: rotate(18deg);}16% {-webkit-transform: rotate(-12deg);transform: rotate(-12deg);}18% {-webkit-transform: rotate(12deg);transform: rotate(12deg);}20%, 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes shake {0% {-webkit-transform: rotate(-15deg);-ms-transform: rotate(-15deg);transform: rotate(-15deg);}2% {-webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);}4% {-webkit-transform: rotate(-18deg);-ms-transform: rotate(-18deg);transform: rotate(-18deg);}6% {-webkit-transform: rotate(18deg);-ms-transform: rotate(18deg);transform: rotate(18deg);}8% {-webkit-transform: rotate(-22deg);-ms-transform: rotate(-22deg);transform: rotate(-22deg);}10% {-webkit-transform: rotate(22deg);-ms-transform: rotate(22deg);transform: rotate(22deg);}12% {-webkit-transform: rotate(-18deg);-ms-transform: rotate(-18deg);transform: rotate(-18deg);}14% {-webkit-transform: rotate(18deg);-ms-transform: rotate(18deg);transform: rotate(18deg);}16% {-webkit-transform: rotate(-12deg);-ms-transform: rotate(-12deg);transform: rotate(-12deg);}18% {-webkit-transform: rotate(12deg);-ms-transform: rotate(12deg);transform: rotate(12deg);}20%, 100% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
}

小铃铛shake动画相关推荐

简单实用铃铛运动动画制作AE教程
铃铛的摆动是有一定幅度和要求的,我们要如何通过AE制作铃铛动画呢?接下来就给大家分享一波铃铛晃动的技巧. 铃铛晃动动画AE教程 1.在绘图工具中绘制铃铛本体和铛簧,选中之后导入AE: 2.铃铛本体锚点 ...
[微信小程序系列] 动画案例之圆点沿着圆圈运动
作者:滴滴公共前端团队 - Tawnia 滴滴作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例: 首先用 wx.crea ...
html5行走的机器人,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
android 动画引擎,用 Android 实现一条小金鱼游动动画（超棒）
此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝试了一下,如下是我用Android实现的效果图: 用 Android 实现一条小金鱼游动动画( ...
关于快手小铃铛广告投放的方式
关于快手小铃铛广告投放的方式关于快手小铃铛广告投放的方式
css卷轴动画小程序,CSS动画｜JavaScript动画｜小程序动画
(1)CSS3 animation 动画 // 定义动画的关键帧 @keyframes xhf { from { transform:scale(0.5, 0.5); opacity:0.5; } t ...
android桌面小火箭升空动画
1 public class MainActivity extends Activity { 2 @Override 3 protected void onCreate(Bundle savedIns ...
微信小程序的动画效果@keyframes
微信小程序的动画效果@keyframes 定义动画的格式: @keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式} } 每个阶段用百分比表示,即从0%到1 ...
电池医生专业版充电时小点旋转动画
核心思想:把小点图片加到透明的UIView上,然后旋转UIView即可 /** * 充电状态小点旋转动画 */ - (void)animationDotRotation { dotRotationF ...

小铃铛shake动画

小铃铛shake动画相关推荐

最新文章

热门文章