<!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>