• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

纯CSS给网站左下角添加蒲公英动态效果

代码笔记 barben 7个月前 (03-11) 209次浏览 0个评论

虽然网站左下角的蒲公英代码已经满大街了,但是由于这个蒲公英摆哪个网站都很好看,所以我还是要斩钉截铁发出来给我自己看(不,我这不是认真的)!

纯CSS,只要不是JS控制而且不影响SEO的代码 —— 都是真香。

<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.barben.cn/image/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>

使用方法:

第一段代码当然是放在HTML文件的<body></body>中啦!如果你是有模板的网站,比如wordpress,就可以放在网站的footer模板中!

第二段代码当然是放在HTML文件中的<head></head>中啦!但是我推荐你像我一样,去掉代码中的style标签,也就是第一行和最后一行,并放在全站引入的css样式文件中!


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
纯CSS给网站左下角添加蒲公英动态效果 - https://www.barben.cn/code/175.html
喜欢 (10)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址