html5 风车特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <title>风车特效</title>
    <style>
    *{margin: 0;padding: 0;}
   .picture{
         position: relative;
         width: 100%;
   }
     img{
        display: block;
        width: 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{
        width: 25%;
        position: absolute;
        top:17%;
        left: 16.4%;
        animation: spin 2s linear infinite;
    }
     .fc2{
        width: 15%;
        position: absolute;
        top:57%;
        left: 44.1%;
        animation: spin 4s linear infinite;
    }
     .fc3{
        width: 20%;
        position: absolute;
        top:43.2%;
        left: 60.4%;
        animation: spin 3s linear infinite;
    }
    .car{
        width: 5%;
        position: absolute;
        top:92.2%;
        left: 88%;
         animation: ff 25s ease-in infinite;
    }
     .yun{
        width: 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="data:images/caodi.png" alt="">
        <div class="tt">
            <img src="data:images/fengche.png" alt="" class="fc1" >
            <img src="data:images/fengche.png" alt="" class="fc2">
            <img src="data:images/fengche.png" alt="" class="fc3">
           <img src="data:images/yun.png" alt="" class="yun">
           <img src="data: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>

转载于:https://www.cnblogs.com/liaoliao985786516/p/5581856.html

html5 风车特效相关推荐

html5风车转圈,HTML5 风车特效
HTML5 风车特效 #box{ border:2px solid #f60; width:800px; height:600px; margin:0 auto; } var canvas,conte ...
html页面for循环风车,html5 风车特效
风车特效 *{margin: 0;padding: 0;} .picture{ position: relative; 100%; } img{ display: block; 100%; } @ke ...
可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
怎么把 html做成雪花特效,CSS3 HTML5下雪特效雪花飘飘
CSS3 HTML5下雪特效雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...
html5 特效框架,超级惊艳 10款HTML5动画特效推荐
原标题:超级惊艳 10款HTML5动画特效推荐今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分 ...
HTML5雨滴特效，晶莹剔透
<html> <head> <title>HTML5雨滴特效</title> <style media="screen" ty ...
html5有哪些小特效,超级惊艳 10款HTML5动画特效推荐
今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些 ...
html显示和隐藏文字特效,14款震撼人心的HTML5文字特效
1.CSS3五彩文字特效文字带阴影效果这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...
6款炫酷的HTML5 3D特效源码
这次我们整理了6款最新的HTML5/CSS3特效及源码,这些特效包括3D花.3D立方体加载动画.3D粒子特效.3D时钟.3D旋转灯.3D原子,一起来看看吧. 1.3D花 2.3D立方体加载动画 3.3 ...
HTML特效推荐,超级惊艳 10款HTML5动画特效推荐[转]
ylbtech_html5_democss 今天咱们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙 ...

html5 风车特效

html5 风车特效相关推荐

最新文章

热门文章