Heim > Artikel > Web-Frontend > 解析css3 shake 抖动样式_html/css_WEB-ITnose
解析css3 shake 抖动样式_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:541351Durchsuche
前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：
CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。
其中有前辈为大家编写好了csshake.css ，大家可以去参考下：http://www.webhek.com/misc/css-shake
Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，下面一起来看看介绍：
使用教程
首先引入css shake的样式表文件。
<link type="text/css" href="csshake.css">
给你的DOM元素添加shake class样式
<div class="shake"></div>
添加抖动样式，一共9种，也可以看DEMO对应添加即可
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>另外还能通过 .freeze, .shake-constant & .hover-stop 来控制状态，具体自己试下哦！接下来是我自己编写的一个鼠标放上停止抖动的小实验：<!doctype html><html> <head> <meta charset="utf-8"> <title>shake study</title> <style type="text/css"> .box{width: 200px;height: 100px;background-color: #ccc;margin:30px auto;} .shake{ -webkit-animation-name: shake_box; -ms-animation-name: shake_box; animation-name: shake_box; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; /*-webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running;*/ } .shake:hover{ -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; /*-webkit-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused;*/ } @keyframes shake_box{ 0% {transform: translate(0px, 0px) rotate(0deg)} 20% {transform: translate(1.5px, -2.5px) rotate(-1.5deg)} 40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)} } @-ms-keyframes shake_box{ 0% {-ms-transform: translate(0px, 0px) rotate(0deg)} 20% {-ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)} 40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)} } </style> </head> <body> <div class="box shake"></div> </body></html>最后，欢迎大家指出我的不足之处哟
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Linux内核源代码情景分析-内存管理之用户页面的定期换出_html/css_WEB-ITnoseNächster Artikel：Css布局系列-上下两栏应用场景_html/css_WEB-ITnose