[趣味代码] 为网站左下角添加一个蒲公英效果

效果图

<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(http://mat1.gtimg.com/www/mb/images/zt/memory/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>