1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 网站搭建知识 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

网站左下角添加蒲公英动态特效的代码--九分科技

时间:2020-06-17   分类:网站搭建知识    作者:网络   来源:网络整理   点击:149

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

  

网站左下角添加蒲公英动态特效的代码--九分科技 九分网络

九分网络

  蒲公英特效代码如下:

本文来自九分网络

<!--蒲公英-->

九分网络

    <div class="dandelion"> 九分网络

        <span class="smalldan"></span> 九分网络

        <span class="bigdan"></span>

www.9fen.net

    </div>

九分网络

      copyright 9fen.net

    <style type="text/css"> copyright 9fen.net

    @media screen and (max-width:600px){

九分网络

    .dandelion{display: none !important;}

www.9fen.net

    }

内容采集来自9fen.net

        .dandelion .smalldan { 本文来自九分网络

    width: 36px;

www.9fen.net

    height: 60px; 内容采集来自9fen.net

    left: 21px; 内容采集来自9fen.net

    background-position: 0 -90px; 九分网络

    border: 0px solid red;

本文来自九分网络

    }

内容采集来自9fen.net

    .dandelion span {

九分网络

    -webkit-animation: ball-x 3s linear 2s infinite; www.9fen.net

      -moz-animation: ball-x 3s linear 2s infinite; copyright 9fen.net

      animation: ball-x 3s linear 2s infinite; copyright 9fen.net

    -webkit-transform-origin: bottom center;

九分网络

      -moz-transform-origin: bottom center; 内容采集来自9fen.net

      transform-origin: bottom center; 内容采集来自9fen.net

    }

copyright 9fen.net

    .dandelion span {

www.9fen.net

    display: block;

内容采集来自9fen.net

    position: fixed;

九分网络

    z-index:9999999999; 内容采集来自9fen.net

    bottom: 0px; 九分网络

    background-image: url(); 本文来自九分网络

    background-repeat: no-repeat; www.9fen.net

    _background: none; copyright 9fen.net

    } copyright 9fen.net

    .dandelion .bigdan { 本文来自九分网络

    width: 64px;

内容采集来自9fen.net

    height: 115px; www.9fen.net

    left: 47px;

内容采集来自9fen.net

    background-position: -86px -36px; copyright 9fen.net

    border: 0px solid red; 九分网络

    } 本文来自九分网络

    @keyframes ball-x {

copyright 9fen.net

        0% { transform:rotate(0deg);} www.9fen.net

       20% { transform:rotate(5deg); } 本文来自九分网络

       40% { transform:rotate(0deg);}

本文来自九分网络

       60% { transform:rotate(-5deg);} 九分网络

       80% { transform:rotate(0deg);} 本文来自九分网络

       100% { transform:rotate(0deg);}

内容采集来自9fen.net

    }

九分网络

    @-webkit-keyframes ball-x {

本文来自九分网络

        0% { -webkit-transform:rotate(0deg);}

copyright 9fen.net

       20% { -webkit-transform:rotate(5deg); } 内容采集来自9fen.net

       40% { -webkit-transform:rotate(0deg);} 九分网络

       60% { -webkit-transform:rotate(-5deg);} copyright 9fen.net

       80% { -webkit-transform:rotate(0deg);}

www.9fen.net

       100% { -webkit-transform:rotate(0deg);} www.9fen.net

    }

内容采集来自9fen.net

    @-moz-keyframes ball-x {

本文来自九分网络

        0% { -moz-transform:rotate(0deg);}

内容采集来自9fen.net

  本文来自九分网络

       20% { -moz-transform:rotate(5deg); }

www.9fen.net

       40% { -moz-transform:rotate(0deg);} 本文来自九分网络

       60% { -moz-transform:rotate(-5deg);}

本文来自九分网络

       80% { -moz-transform:rotate(0deg);}

内容采集来自9fen.net

       100% { -moz-transform:rotate(0deg);}

copyright 9fen.net

    } 本文来自九分网络

    </style> 本文来自九分网络

 

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

www.9fen.net

标签: 站长经验 草根站长 特效代码 蒲公英 尹华

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----