通过css和js的定时器,实现让这个风车图片转起来。
这里没有图片的可以截取文章中的图片
HTML代码:
<div>
<h3>我爱玩风车</h3>
<img src="img/logo.png" class="a" alt="" id="img1">
<hr>
<input type="button" value="开始" οnclick="start1()">
<input type="button" value="停止" οnclick="stop1()">
<input type="button" value="反转" οnclick="reverse()">
<input type="button" value="转1圈" οnclick="circle(1)">
转<input type="text" size="1" value="" οnblur="circle(this.value)">圈
</div>
CSS代码:
<style>
.fc{
animation:wm 2s infinite linear;
}
@keyframes wm {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
.reverseC{
animation:reversewm 2s infinite linear;
}
@keyframes reversewm {
from {
transform:rotate(-360deg);
}
to {
transform:rotate(0deg);
}
}
</style>
JS代码:
<script>
//转起来
function start1() {
document.getElementById("img1").className='fc'
}
//翻转
function reverse() {
document.getElementById("img1").className='reverseC'
}
//停下来
function stop1() {
document.getElementById("img1").className=''
}
function circle(obj){
let a = document.getElementById("img1");
a.className='fc'
let s1=new Date().getSeconds()
a=setTimeout(function () {
stop1()
},2000*obj)
}
</script>