网页左下角蒲公英动画
生活随笔
收集整理的這篇文章主要介紹了
网页左下角蒲公英动画
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
話不多說，直接上源碼，（源自：https://www.seoblogs.cn/seogj/2018621.html）
復(fù)制以下代碼直接在瀏覽器運(yùn)行即可
?
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>轉(zhuǎn)載于:https://www.cnblogs.com/DSH-/p/10778612.html
總結(jié)
以上是生活随笔為你收集整理的网页左下角蒲公英动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces Round #55
- 下一篇： Python的open函数文件读写线程不