解析css3 shake 抖动样式_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:48:541319浏览
前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：
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>最后，欢迎大家指出我的不足之处哟
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn