网站左下角添加蒲公英动态特效的代码

<!--蒲公英-->

    <div class="dandelion">

        <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();

    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>

标签： rotategt0deglt