BigCoke

给元素加上css抖动效果!
连夜赶完作业的我又跑出来水文了,说好的要认真复习呢?ヾ(◍°∇°◍)ノ゙前言=废话最近发现一个有意思的css,可以...
扫描右侧二维码阅读全文
05
2019/01

给元素加上css抖动效果!

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


前言=废话

最近发现一个有意思的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


本文由 BigCoke 所撰,未注明内容均为原创,
并采用 CC BY 4.0 进行授权许可,转载请注明源地址
原文地址:https://cokewithice.com/p/51.html

Last modification:January 5th, 2019 at 02:54 pm

Leave a Comment

8 comments

  1. 菜鸟日记

    很魔性啊’抖起来~

  2. Link

    奈斯,copy_(•̀ω•́ 」∠)_

    1. BigCoke
      @Link 随便copy啊,反正原作者也不是我(´இ皿இ`)
  3. 小白丶丶

    特效博客(๑•̀ω•́๑)

    1. BigCoke
      @小白丶丶

      哈哈哈,其实特效也不是很多啊,就一个js彩色飘带,鼠标,点击爆炸效果,全站输入效果而已(/ω\)

  4. 七越

    (((┏(; ̄▽ ̄)┛装完逼就跑 这个特效可以 挺骚气

    1. BigCoke
      @七越

      如( *・ω・)✄╰ひ╯果我把这个特效加到评论区的头像上会怎样

      1. 七越
        @BigCoke

        ( ̄y▽ ̄)~*捂嘴偷笑 这个可以有