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条评论

撰写评论

电子邮件地址不会被公开,必填项已用 * 标出。