WordPress给网站左下角添加蒲公英

2018年1月20日11:02:18 发表评论 1,791

WordPress给网站左下角添加蒲公英。这个功能刚开始建站的时候,就有使用过一阵子,感觉还不错,现在也看到许多网站都加了这个,最近也就折腾了下,给朱曙明博客添加了这个效果。不过之前看到的好像是使用JS来增加的,这次看到这个代码,也就放在这里了。

WordPress给网站左下角添加蒲公英

使用图片:

WordPress给网站左下角添加蒲公英

部署代码:

  1. <!-- 蒲公英 -->
  2.   <div class="dandelion">
  3.         <span class="smalldan"></span>
  4.         <span class="bigdan"></span>
  5.     </div>
  6.     <style type="text/css">
  7.     @media screen and (max-width:600px){
  8.     .dandelion{displaynone !important;}
  9.     }
  10.         .dandelion .smalldan {
  11.     width36px;
  12.     height60px;
  13.     left21px;
  14.     background-position: 0 -90px;
  15.     border0px solid red;
  16.     }
  17.     .dandelion span {
  18.     -webkit-animation: ball-x 3s linear 2s infinite;
  19.       -moz-animation: ball-x 3s linear 2s infinite;
  20.       animation: ball-x 3s linear 2s infinite;
  21.     -webkit-transform-origin: bottombottom center;
  22.       -moz-transform-origin: bottombottom center;
  23.       transform-origin: bottombottom center;
  24.     }
  25.     .dandelion span {
  26.     displayblock;
  27.     positionfixed;
  28.     z-index:9999999999;
  29.     bottombottom0px;
  30.     background-imageurl(http://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
  31.     background-repeatno-repeat;
  32.     _background: none;
  33.     }
  34.     .dandelion .bigdan {
  35.     width64px;
  36.     height115px;
  37.     left47px;
  38.     background-position: -86px -36px;
  39.     border0px solid red;
  40.     }
  41.     @keyframes ball-x {
  42.         0% { transform:rotate(0deg);}
  43.        20% { transform:rotate(5deg); }
  44.        40% { transform:rotate(0deg);}
  45.        60% { transform:rotate(-5deg);}
  46.        80% { transform:rotate(0deg);}
  47.        100% { transform:rotate(0deg);}
  48.     }
  49.     @-webkit-keyframes ball-x {
  50.         0% { -webkit-transform:rotate(0deg);}
  51.        20% { -webkit-transform:rotate(5deg); }
  52.        40% { -webkit-transform:rotate(0deg);}
  53.        60% { -webkit-transform:rotate(-5deg);}
  54.        80% { -webkit-transform:rotate(0deg);}
  55.        100% { -webkit-transform:rotate(0deg);}
  56.     }
  57.     @-moz-keyframes ball-x {
  58.         0% { -moz-transform:rotate(0deg);}
  59.        20% { -moz-transform:rotate(5deg); }
  60.        40% { -moz-transform:rotate(0deg);}
  61.        60% { -moz-transform:rotate(-5deg);}
  62.        80% { -moz-transform:rotate(0deg);}
  63.        100% { -moz-transform:rotate(0deg);}
  64.     }
  65.     </style>

将以上代码放在在footer中就可以了。需要使用的图片在上面,可以下载过去。

效果如本站左下角,已经部署上了。

代码来源互联网。

文章来源:深圳虾米SEO

这篇文章是放在另外一个博客了,新站,还未收录。转到这里给新站做个链接吧。



版权声明:本文由江西SEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/4778.html

  • 博客之家
  • 博客之家,本站的资源收集于群里以便下载。当然,更多的是建站知识交流~
  • weinxin
  • SEO优化交流群
  • SEO优化交流群,交流seo优化技巧。860716446
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: