• html5 风车特效


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="" content="">
        <title>风车特效</title>
        <style>
        *{margin: 0;padding: 0;}
       .picture{
             position: relative;
             100%;
       }
         img{
            display: block;
            100%;       
           
        }
        
        
        
        
        
     @keyframes spin
    {
    from {transform: rotate(-360deg)}
    to {transform: rotate(0deg)}
    }

    @-moz-keyframes spin /* Firefox */
    {
    from {transform: rotate(-360deg)}
    to {transform: rotate(-0deg)}
    }
         
     @keyframes ff
    {
    from {transform: translate(100%)}
    to {transform:translate(-2000%)}
    }

    @-moz-keyframes ff /* Firefox */
    {
    from {transform: translate(100%)}
    to {transform:translate(-2000%)}
    }    
        
        .fc1{
            25%;
            position: absolute;
            top:17%;
            left: 16.4%;
            animation: spin 2s linear infinite;
        }
         .fc2{
            15%;
            position: absolute;
            top:57%;
            left: 44.1%;   
            animation: spin 4s linear infinite;
        }
         .fc3{
            20%;
            position: absolute;
            top:43.2%;
            left: 60.4%;     
            animation: spin 3s linear infinite;
        }
        .car{
            5%;
            position: absolute;
            top:92.2%;
            left: 88%;
             animation: ff 25s ease-in infinite;
        }
         .yun{
            5%;
            position: absolute;
            top:12.2%;
            left: 88%;
             animation: ff 35s ease-in infinite;
        }
        
       .on{
           
             animation-play-state: paused;
                
        }
        </style>
    </head>
    <body>
        <div class="picture">
            <img src="images/caodi.png" alt="">
            <div class="tt">
                <img src="images/fengche.png" alt="" class="fc1" >
                <img src="images/fengche.png" alt="" class="fc2">
                <img src="images/fengche.png" alt="" class="fc3">
               <img src="images/yun.png" alt="" class="yun">
               <img src="images/car.png" alt="" class="car">
           </div>   
        </div>
         <script src="js/jquery.js"></script>
        <script>
           
                // var f=document.getElementById('on');
                // f.style.animation='none';  
               $(".tt img").hover(function(){
                  $(this).addClass("on").siblings().removeClass("on");                 
               },function(){
                   $(this).removeClass("on");
               });
               

        </script>
    </body>
    </html>

  • 相关阅读:
    02-线性结构2 一元多项式的乘法与加法运算
    两个堆栈实现列队
    队列的顺序存储和链式存储实现
    包含MIN函数的栈+一个数组实现两个堆栈+两个数组实现MIN栈
    利用纯java捕获和播放音频
    许令波老师的java的IO机制分析文章
    soundtouch源码分析__based on csdn :
    java桌面项目打包_by icewee_写得太棒了,直接转载了
    白化检验( 白噪声准则检验 )
    对于冯嘉礼老师定性映射理论的复习
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/5581856.html
Copyright © 2020-2023  润新知