• Welcome to Baben's blog that year. I'm glad to meet you at the right age!
  • Due to the theme, the QQ login partner displays the default avatar in the comments. Please go to the personal center to upload the avatar again.
> Code Notes > Pure CSS adds dandelion dynamic effect to the lower left corner of the website

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

Code Notes barben Five years ago (March 11, 2019) 2282 views 1 comment

Although the code of the dandelion in the lower left corner of the website is full of streets, I still want to resolute and decisive Of Send it to me (No, I'm not serious)!

Pure CSS, as long as it is not controlled by JS and does not affect SEO code - it is 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 the<body></body>of the HTML file! If you are a website with a template, such as WordPress, you can put it in the footer template of the website!

Of course, the second code is placed in<head></head>in the HTML file! But I recommend that you, like me, remove the style tag in the code, that is, the first line and the last line, and put it in the CSS style file imported by the whole site!

Eight blogs that year, we have been
If the author does not indicate that it is an original article, please indicate the link and source of this article for reprinting
Pure CSS adds dandelion dynamic effect to the lower left corner of the website- https://www.barben.cn/code/175.html
Like（ eleven )
Post my comments
Cancel comment
expression Mapping Bold Strike through Center Italic

You need to bring your nickname and email with you in the review of Eight Books that year!

  • Nickname (required)
  • Email (required)
  • website
Successfully captured one Only rare elves
  1. Can swing and jam be solved
    A dragon in the sky 2021-08-20 15:29 reply