1
CSShake——元素摇晃特效
source link: https://greyli.com/css-shake/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSShake——元素摇晃特效
所谓的摇晃特效，就是当你把光标移到文字上的时候……我可以轻微的晃，慢慢的晃，猛烈晃，疯狂晃，甚至左右晃，上下晃，旋转着，闪烁着 ……
光标移到驴子身上就可以摇晃它
前段时间在家没事做，突然想到之前看到的CSS特效，觉得文字摇晃很好玩。google了一下，原来是一个开源的css包。心血来潮，便想做个网页试一下。
下面是css shake的用法介绍，整理翻译自github页面的介绍：
首先在html里声明包含css文件，最简单的方法是通过CDN加载（你也可以将https://csshake.surge.sh/csshake.min.css下载到本地然后加载）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />
然后通过添加class来使用不同的效果：
<div class="shake">Foo</div>
<div class="shake shake-hard">Bar</div>
<div class="shake shake-slow">Baz</div>
<div class="shake shake-little">Qux</div>
<div class="shake shake-horizontal">Egg</div>
<div class="shake shake-vertical">Ham</div>
<div class="shake shake-rotate">Snake</div>
<div class="shake shake-opacity">Apple</div>
<div class="shake shake-crazy">Orange</div>
还可以通过增加class来控制动画的状态（比如一直摇晃，还是光标放上去摇晃）
<!-- Freeze the animation at that point when :hover -->
<div class="shake shake-freeze">Hello</div>
<!-- Continuous animation instead on :hover -->
<div class="shake shake-constant">Hola</div>
<!-- and stop when :hover -->
<div class="shake shake-constant shake-constant-hover">Halo</div>
另外，还可以自定义摇晃类型，具体的用法请参考https://elrumordelaluz.github.io/csshake/
《CSShake——元素摇晃特效》上有1条评论
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK