话不多说, 直接上源码,(源自: https://www.seoblogs.cn/seogj/2018621.html)
复制以下代码直接在浏览器运行即可
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/CSS">
- HTML,body{ width: 100%; height: 100%; padding: 0; margin: 0; } @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>
- </head>
- <body>
- <!-- 蒲公英 -->
- <div class="dandelion">
- <span class="smalldan">
- </span>
- <span class="bigdan">
- </span>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3037866.html