• 音乐的感动,在于聆听,枫林幻境,期待您的投稿... QQ
  • 若您有好的音乐就来投稿吧,博主热烈欢迎哦 QQ
  • 欢迎光临枫林幻境,本站域名http://fyypll.cn

『特效代码』为网站左下角添加一个蒲公英效果

代码集合 枫雨 3年前 (2016-05-25) 6800次浏览 已收录 27个评论

前言

刚看到有朋友问我本站左下角的蒲公英是咋弄的,大家都猜到了,是代码实现的(废话 :evil: ),额……

代码

    <div class="dandelion">
        <span class="smalldan"></span>
        <span class="bigdan"></span>
    </div>
     
    <style type="text/css">
    @media screen and (max-width:600px){
    .dandelion{display: none !important;}
    }
        .dandelion .smalldan {
    width: 36px;
    height: 60px;
    left: 21px;
    background-position: 0 -90px;
    border: 0px solid red;
    }
    .dandelion span {
    -webkit-animation: ball-x 3s linear 2s infinite;
      -moz-animation: ball-x 3s linear 2s infinite;
      animation: ball-x 3s linear 2s infinite;
    -webkit-transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      transform-origin: bottom center;
    }
    .dandelion span {
    display: block;
    position: fixed;
    z-index:9999999999;
    bottom: 0px;
    background-image: url(http://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
    background-repeat: no-repeat;
    _background: none;
    }
    .dandelion .bigdan {
    width: 64px;
    height: 115px;
    left: 47px;
    background-position: -86px -36px;
    border: 0px solid red;
    }
    @keyframes ball-x {
        0% { transform:rotate(0deg);}
       20% { transform:rotate(5deg); }
       40% { transform:rotate(0deg);}
       60% { transform:rotate(-5deg);}
       80% { transform:rotate(0deg);}
       100% { transform:rotate(0deg);}
    }
    @-webkit-keyframes ball-x {
        0% { -webkit-transform:rotate(0deg);}
       20% { -webkit-transform:rotate(5deg); }
       40% { -webkit-transform:rotate(0deg);}
       60% { -webkit-transform:rotate(-5deg);}
       80% { -webkit-transform:rotate(0deg);}
       100% { -webkit-transform:rotate(0deg);}
    }
    @-moz-keyframes ball-x {
        0% { -moz-transform:rotate(0deg);}
       20% { -moz-transform:rotate(5deg); }
       40% { -moz-transform:rotate(0deg);}
       60% { -moz-transform:rotate(-5deg);}
       80% { -moz-transform:rotate(0deg);}
       100% { -moz-transform:rotate(0deg);}
    }
    </style>

说明

使用简单,直接复制上面的代码,加到首页就 ok 了,毫无技术含量 :evil:

演示

传说中的演示

最后

是的,我也只是搬运工… :oops: 代码转载自乐趣公园

枫林幻境 , 版权所有丨如未注明 , 均为原创丨转载请注明出处:枫林幻境 - fyypll.cn
喜欢 (24)
关于作者:
音乐的感动,在于聆听,枫林幻境,分享音乐的乐趣
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(27)个小伙伴在吐槽
  1. 效果不错,不知道影响加载速度不,想想还是算来吧,毕竟是过来找音乐听的。。
    刘导师2017-03-29 13:36 回复 Windows 7 | Chrome 57.0.2987.110
    • 吓得我文章都更新了 :lol:
      枫雨2017-03-29 14:18 Windows 10 | Chrome 50.0.2661.102
  2. 放了七个月了?厉害!要是我,早就撤了!
    胡德杰2017-01-02 18:45 回复 Windows 7 | Chrome 55.0.2883.87
    • 这是系统自动的,没有更多的来覆盖,就一直这样了
      枫雨2017-01-02 19:02 Linux | Chrome 49.0.0.0
  3. 分享的不错,谢谢
    凯哥自媒体2016-12-20 10:50 回复 Windows 7 | Chrome 47.0.2526.106
    • 欢迎欢迎 :smile:
      枫雨2016-12-20 13:29 Windows 10 | Firefox浏览器 50.0
  4. 不错哦,收藏了
    西北2016-09-06 20:20 回复 Windows XP | Chrome 42.0.2311.154
  5. 打包带走
    慕若曦2016-07-12 18:10 回复 Windows 8.1 | Chrome 51.0.2704.103
  6. 这个,蒲公英就看看吗?没别的功能啊?
    姜辰2016-07-08 20:07 回复 Windows 10 | Firefox浏览器 42.0
    • 额,确实只能看看,没有啥功能
      枫雨2016-07-09 17:35 Windows 10 | Firefox浏览器 47.0
  7. 路过瞧瞧
    tao2016-06-04 22:04 回复 Linux | Chrome 50.0.2661.89
  8. :oops: 好看!装饰是挺不错的。
    夏天烤洋芋2016-06-02 14:29 回复 Windows 10 | Chrome 42.0.2311.154
  9. 今天用电脑一看,蒲公英摇来摇去的,很好看! :razz:
    Clarke2016-05-29 15:37 回复 Windows 10 | Chrome 45.0.2454.101
    • 是的,我这网站背景偏白,效果不明显,黑色背景效果更好
      枫雨2016-05-29 21:37 Windows 10 | Firefox浏览器 46.0
  10. 我就看看,不说话。这玩意在某些时候挺有用的一般用不着
    晨曦2016-05-29 10:37 回复 Linux | Safari浏览器 534.30
    • 看到时用不着,要用时找不到....
      枫雨2016-05-29 21:35 Windows 10 | Firefox浏览器 46.0
  11. 还是不行,应该是主题的锅!这文我转了啊! :mrgreen:
    florentino2016-05-26 16:50 回复 Windows 7 | Chrome 50.0.2661.102
    • 随便你喽
      枫雨2016-05-26 18:38 Windows 10 | Firefox浏览器 46.0
  12. 艹,竟然用不起来,没效果,在测试站点还有效果呢!http://text-gududao.rhcloud.com/ :!:
    florentino2016-05-26 16:22 回复 Windows 7 | Chrome 50.0.2661.102
    • :arrow: :arrow: 再试试,是不是哪里弄错了没注意?
      枫雨2016-05-26 16:36 Windows 10 | Firefox浏览器 46.0
  13. 看起来很好看,代码是云落写的么……好久没去他那里看了
    慕若曦2016-05-26 01:14 回复 Windows 8.1 | Chrome 50.0.2661.102
    • :oops:
      枫雨2016-05-26 12:20 Windows 10 | Chrome 48.0.2564.116
  14. 不是加的代码呀,是WordPress官方的一款统计插件,不过用了之后,七牛同步的图片都挂了,刚才我又关了! :sad:
    florentino2016-05-25 20:53 回复 Windows 7 | Chrome 50.0.2661.102
    • :arrow:
      枫雨2016-05-25 21:12 Windows 10 | Firefox浏览器 46.0
  15. :mrgreen: :mrgreen:
    florentino2016-05-25 20:40 回复 Windows 7 | Chrome 50.0.2661.102
    • 你的那个网站评论邮件回复功能是你加的?代码是啥?我这个是主题自带,但我想知道单独的代码
      枫雨2016-05-25 20:45 Windows 10 | Firefox浏览器 46.0
    • 不过咋感觉你那个好像没效果,你回复了我都没邮件通知我
      枫雨2016-05-25 20:47 Windows 10 | Firefox浏览器 46.0