• Welcome to the eight year blog, I'm glad to meet you at the right age!
  • Due to the theme, QQ login partners will display the default avatar in the comments. Please go to the personal center and upload the avatar again.

Pure CSS adds dandelion dynamic effect to the lower left corner of the website

Code Notes barben 2 years ago (March 11, 2019) 629 views 0 comments

Although the dandelion code in the lower left corner of the website has been full of streets, but because this dandelion places which website is very good-looking, so I still want to resolute and decisive Of Send it out to me for myself (no, I'm not serious)!

Pure CSS, as long as it is not controlled by JS and does not affect the code of SEO - are really fragrant.

 <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>

usage method:

Of course, the first code is placed in < body > < / body > of HTML file! If you are a website with a template, such as WordPress, you can put it in the website's footer template!

Of course, the second code is placed in < head > < / head > in the HTML file! But I recommend that you, like me, remove the style tags from the code, that is, the first and last lines, and put them in the CSS style files introduced throughout the site!


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Pure CSS adds dandelion dynamic effect to the lower left corner of the website - https://www.barben.cn/code/175.html
Like it( ten )
Post my comments
Cancel comment
expression Mapping Bold Strikethrough Center Italics

You need to bring your nickname and email with you in the year of eight!

  • Nickname (required)
  • Email address (required)
  • website