分享一个最近拿CSS动画效果,手敲的小风车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小风车</title>
<style>
.box{
width: 400px;
height: 400px;
position: relative;
transition: 1s;
animation: fengche 1.5s infinite linear 1s;
}
.box-m{
width: 400px;
height: 400px;
position: relative;
transition: 1s;
animation: fengche 2.3s infinite linear 1s;
}
.box-k{
width: 400px;
height: 400px;
position: relative;
transition: 1s;
animation: fengche 0.7s infinite linear 1s;
}
#zjh{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC transparent transparent transparent;
position: absolute;
top: 200px;
}
#zjh1{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color:transparent #0099CC transparent transparent;
position: absolute;
}
#zjh2{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color:transparent transparent #996699 transparent;
position: absolute;
left: 200px;
}
#zjh3{
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color:transparent transparent transparent #339933;
position: absolute;
top: 200px;
left: 200px;
}
#zjh4{
width: 3px;
height: 450px;
background-color: black;
position: absolute;
top: 207px;
left: 207px;
}
/* .box:hover{
transform: rotate(360deg);
} */
@keyframes fengche{
/* 25%{
transform: rotate(90deg);
} */
/* 50%{
transform: rotate(180deg);
} */
/* 75%{
transform: rotate(270deg);
} */
100%{
transform: rotate(360deg);
}
}
img{
position: absolute;
top: 195px;
left: 195px;
}
#btn{
width: 320px;
height: 300px;
position: relative;
top: 0px;
left: 500px;
border: 1px solid red;
background-color: rgb(141,152,205);
border-radius: 50px;
}
#btn1{
position: absolute;
left: 20px;
top: 40px;
width: 80px;
height: 30px;
border-radius: 20px;
color: #6d8346;
background-color: #cde6c7;
}
#btn2{
position: absolute;
left: 120px;
top: 40px;
width: 80px;
height: 30px;
border-radius: 20px;
background-color: #f58220;
color: #fedcbd;
}
#btn3{
position: absolute;
left: 220px;
top: 40px;
width: 80px;
height: 30px;
border-radius: 20px;
background-color: #f05b72;
color: #f8aba6;
}
#btn>img{
width: 220px;
height: 210px;
position: absolute;
left: 40px;
top: 80px;
}
#btn1:hover{
box-shadow: 3px 3px 5px #9d9087 inset;
}
#btn2:hover{
box-shadow: 3px 3px 5px #9d9087 inset;
}
#btn3:hover{
box-shadow: 3px 3px 5px #9d9087 inset;
}
</style>
</head>
<body>
<div class="box">
<div id="zjh"></div>
<div id="zjh1"></div>
<div id="zjh2"></div>
<div id="zjh3"></div>
</div>
<div id="zjh4"></div>
<img src="../imgs/太阳.png">
<div id="btn">
<button id="btn1">慢速</button>
<button id="btn2">中速</button>
<button id="btn3">快速</button>
<img src="../imgs/猫爪.png">
</div>
<script>
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var btn3 = document.querySelector('#btn3');
var box = document.querySelector('.box');
btn1.addEventListener('click',function(){
box.className = 'box-m';
})
btn2.addEventListener('click',function(){
box.className = 'box';
})
btn3.addEventListener('click',function(){
box.className = 'box-k';
})
</script>
</body>
</html>
图片地址:↓