seo优化网

首页 优化技术正文

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

xlm2468刚刚71700

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

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

  蒲公英特效代码如下:

<!--蒲公英-->     <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导航页。

上一篇:阿里云提示dedecms恣意文件上传缝隙修正办法

下一篇:给织梦网站文章页增加TAG标签链接的办法

(¬_¬) 还不快点抢沙发!!!

服务热线

17683935017

qrcode

扫一扫二维码,访问手机版