用CSS在网站底部加上蒲公英动态效果的实现方法

  在做网站的时候我们经常想要实现一些动态效果来为网站增添一点活力,而通常情况下,实现动态效果都需要用到JS代码。JS能够实现比较复杂且炫酷的动态效果,但通常情况下JS会拖慢网站的响应速度且不利于搜索引擎优化。怎么做的既有动态效果又利于搜索引擎SEO优化呢?今天姜成seo给大家推荐一个用CSS实现的蒲公英动态效果。下面是完整代码,将代码加到网站底部模版文件(一般为foot.htm)里即可实现效果,此外,如果想让首页代码精简一点也可以跟姜成seo博客一样将<style></style>里面的文件写到你的CSS文件里来调用,实现的效果一样。

  代码如下:  

<!--蒲公英-->

  <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(https://www.seoblogs.cn/images/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>

内容版权声明:除非注明,否则皆为SEO博客原创文章。

姜成SEO技术交流群

转载注明出处:https://www.seoblogs.cn/seogj/2018621.html

跟大家分享一下你的看法吧!
  • 全部评论(0
    还没有评论,快来抢沙发吧!