網頁左下角蒲公英動畫

important max-width bsp anim key back ctype htm linear
話不多說，直接上源碼，（源自：https://www.seoblogs.cn/seogj/2018621.html）
復制以下代碼直接在瀏覽器運行即可
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             html,body{
  8 
                 width: 100%;
  9                 height: 100%;
 10                 padding: 0;
 11                 margin: 0;
 12             }
 13             
 14             @media screen and (max-width:600px) {
 15                 .dandelion {
 16                     display: none !important;
 17 
                 }
 18             }
 19             
 20             .dandelion .smalldan {
 21                 width: 36px;
 22                 height: 60px;
 23                 left: 21px;
 24                 background-position: 0 -90px;
 25                 border: 0px solid red;
 26             } 

 27             
 28             .dandelion span {
 29                 -webkit-animation: ball-x 3s linear 2s infinite;
 30                 -moz-animation: ball-x 3s linear 2s infinite;
 31                 animation: ball-x 3s linear 2s infinite;
 32                 -webkit-transform-origin: bottom center;
 33                 -moz-transform-origin: bottom center;
 34                 transform-origin: bottom center;
 35             }
 36             
 37             .dandelion span {
 38                 display: block;
 39                 position: fixed;
 40                 z-index: 9999999999;
 41                 bottom: 0px;
 42                 background-image: url(https://www.seoblogs.cn/images/pgy.png);
 43                 background-repeat: no-repeat;
 44                 _background: none;
 45             }
 46             
 47             .dandelion .bigdan {
 48                 width: 64px;
 49                 height: 115px;
 50                 left: 47px;
 51                 background-position: -86px -36px;
 52                 border: 0px solid red;
 53             }
 54             
 55             @keyframes ball-x {
 56                 0% {
 57                     transform: rotate(0deg);
 58                 }
 59                 20% {
 60                     transform: rotate(5deg);
 61                 }
 62                 40% {
 63                     transform: rotate(0deg);
 64                 }
 65                 60% {
 66                     transform: rotate(-5deg);
 67                 }
 68                 80% {
 69                     transform: rotate(0deg);
 70                 }
 71                 100% {
 72                     transform: rotate(0deg);
 73                 }
 74             }
 75             
 76             @-webkit-keyframes ball-x {
 77                 0% {
 78                     -webkit-transform: rotate(0deg);
 79                 }
 80                 20% {
 81                     -webkit-transform: rotate(5deg);
 82                 }
 83                 40% {
 84                     -webkit-transform: rotate(0deg);
 85                 }
 86                 60% {
 87                     -webkit-transform: rotate(-5deg);
 88                 }
 89                 80% {
 90                     -webkit-transform: rotate(0deg);
 91                 }
 92                 100% {
 93                     -webkit-transform: rotate(0deg);
 94                 }
 95             }
 96             
 97             @-moz-keyframes ball-x {
 98                 0% {
 99                     -moz-transform: rotate(0deg);
100                 }
101                 20% {
102                     -moz-transform: rotate(5deg);
103                 }
104                 40% {
105                     -moz-transform: rotate(0deg);
106                 }
107                 60% {
108                     -moz-transform: rotate(-5deg);
109                 }
110                 80% {
111                     -moz-transform: rotate(0deg);
112                 }
113                 100% {
114                     -moz-transform: rotate(0deg);
115                 }
116             }
117         </style>
118     </head>
119     <body>
120         <!--蒲公英-->
121         <div class="dandelion">
122             <span class="smalldan"></span>
123             <span class="bigdan"></span>
124         </div>
125     </body>
126 </html>
網頁左下角蒲公英動畫
網頁左下角蒲公英動畫

相關推薦
