连夜赶完作业的我又跑出来水文了,说好的要认真复习呢?ヾ(◍°∇°◍)ノ゙

前言=废话

最近发现一个有意思的css,可以设置元素抖动,就像这样。

鼠标移上去好魔性哈哈哈,这么对自己的QQ头像真的好吗
感觉不错,于是就给网站运行时间的<span>标签里加了这个class
这里就水一篇文章,分享一下。

引入css

你可以下载shake.css放到你站点,然后将一下代码加入到主题文件的header.php里,或者<head>标签内。

<link href="/css/shake.css" rel="stylesheet" media="all">

或者,不下载css,直接调用我站点上的css文件,将以下代码插入到相同的地方,

<link href="https://cokewithice.com/css/shake.css" rel="stylesheet" media="all">

将样式加入到元素中

<p>标签为例,将class设置为shake shake-hard

<p class="shake shake-hard">都给我抖起来ヽ(゚∀゚)メ(゚∀゚)ノ </p>

效果如下:

都给我抖起来ヽ(゚∀゚)メ(゚∀゚)ノ

如果你觉得元素抖动的太快,这里还有更多的抖动样式。

shake shake-slow
shake shake-little
shake shake-horizontal
shake shake-vertical
shake shake-rotate
shake shake-opacity
shake shake-crazy

效果如下:

        

shake-slow

shake-little

shake-horizontal

shake-vertical

shake-rotate

shake-opacity

shake-crazy