zoukankan html css js c++ java

网页左下角蒲公英动画

话不多说，直接上源码，（源自：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-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>

成功不是终点，失败也并非末日，重要的是前行的勇气！

查看全文

相关阅读:
Vue：对象更改检测注意事项
 Vue实现简易留言板
 CSS实现三级菜单[转]
Vue 侦听属性
 Vue-列表渲染非变异方法
 MYSQL/HIVESQL笔试题（七）：HIVESQL（七）
leetcode算法题基础（四十九）树BFS
数据结构基础（八）图Graph
数据结构基础（七）优先队列 PriorityQueue，堆Heap
数据结构基础（六）树

原文地址：https://www.cnblogs.com/DSH-/p/10778612.html