zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    透视表提取不反复记录(1)-出现值
    ORA-38760: This database instance failed to turn on flashback database
    Android蓝牙串口程序开发
    指尖上的电商---(5)schema.xml配置具体解释
    iOS-UIImage imageWithContentsOfFile 和 imageName 对照
    JSON-RPC轻量级远程调用协议介绍及使用
    POJ 2296 Map Labeler(2-sat)
    接口測试-HAR
    [Leetcode]Combination Sum II
    MarkDown、Vim双剑合璧
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/5581856.html
Copyright © 2011-2022 走看看