css抖动基础_html/css_WEB-ITnose
程序员文章站
2022-05-11 17:55:20
...
以上是代码。
有关属性:animation
animation-name:规定需要绑定到选择器keyframe名称
animation-duration:规定花费的时间以秒或毫秒记
animation-timing-fuction:规定动画速度曲线
animation-delay:规定开始之前的延迟
animation-iteration-count:规定动画应播放的次数
animation-direction:规定是否应该轮流反向播放动画
@-webkit-keyframes buzz-out{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);
}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}
这里可以设置抖动的幅度
推荐阅读
-
Bootstrap栅格布局系统的特点_html/css_WEB-ITnose
-
初探css3_html/css_WEB-ITnose
-
二级导航菜单_html/css_WEB-ITnose
-
Bootstrap组件之Glyphicons字体图标_html/css_WEB-ITnose
-
HTML常用标签之超链接标签_html/css_WEB-ITnose
-
CSS3透明属性opacity_html/css_WEB-ITnose
-
CSS的opacity属性_html/css_WEB-ITnose
-
一款纯css3实现的颜色渐变按钮_html/css_WEB-ITnose
-
HTML+CSS基础知识点简要汇总(思维导图)
-
【WEB基础】HTML & CSS 基础入门(4)列表及其样式