Home > Article > Web Front-end > Parse css3 shake shake style_html/css_WEB-ITnose
Parse css3 shake shake style_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:48:541356browse
While working on a project at the front end, I found that a shaking button is very eye-catching. I studied the implementation principle and share it with you here:
CSS Shake is an animation style implemented using CSS3 and written in SASS. With it, we can achieve a variety of different styles of shaking effects (such as the GIF image below). This is a very small animation, but it’s great when used properly, such as on ads, images, and buttons, to attract the user’s attention and encourage them to click on it.
One of the seniors has written csshake.css for everyone. You can refer to it: http://www.webhek.com/misc/css-shake
Csshake has 9 shakes Style, three states, such as the mouse is pulled, infinite shaking, and the mouse is hovering. Let’s take a look at the introduction:
Usage tutorial
First introduce the style sheet file of css shake.
<link type="text/css" href="csshake.css">
Add shake class styles to your DOM elements
<div class="shake"></div>
Add shake styles, there are 9 types in total, you can also see the DEMO to add them accordingly
<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>最后，欢迎大家指出我的不足之处哟