网站左下角添加蒲公英动态特效的代码 - 六夜娱乐网



网站左下角添加蒲公英动态特效的代码

作者: 六夜娱乐网

全网最全的网络资源分享网站

标签:

特别声明:本站资源分别为免费资源、查看密码或解压密码资源、三个级别VIP会员资源。本站所有发布的内容都是安全,请放心下载!本站不可能所有资源都可以商业用途,原创或部分除外!如:商业用途请联系原作者购买正版。与本站无关!若侵犯到您的权益,请联系本站删除,我们将及时处理!

  之前在网上看到有些博主的网站左下角添加了一个蒲公英动态特效,感觉挺有意思的,喜欢的站长可以加到自己的网站上,如下图所示。

  

  蒲公英特效代码如下:

<!--蒲公英-->
    <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>

  使用方法:如果是全站展示,可以将代码放在模板文件中,建议放在foot文件里。单独的网页直接放在body上面即可,PC端预览,可参考本站的SEO导航页

    分享到:
    未经允许不得转载:

    作者: 六夜娱乐网, 转载或复制请以 超链接形式 并注明出处 六夜娱乐网
    原文地址: 《网站左下角添加蒲公英动态特效的代码》 发布于2020-5-1

    评论

    切换注册

    登录

    忘记密码?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    网站左下角添加蒲公英动态特效的代码

    长按图片转发给朋友

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏

    2096