相信大家都对风车这个东西感到不陌生，所以我们今天就要写一个大风车的案例.

这是一个动态网页，下面是css文件的代码，废话少说，上代码：

<style>
        .fc{
            animation:wm 2s infinite linear;
        }
        @keyframes wm {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(-360deg);
            }
        }

        .rfc{
            animation:wm1 2s infinite linear;
        }
        @keyframes wm1 {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
</style>

接下来是js的文件

<body>
<div>
    <h3>我爱玩风车</h3>
    <img src="https://www.freexyz.cn/img/logo.png" class="" alt="" id="img1">
    <hr>
    <input type="button" value="开始" onclick="start1()">
    <input type="button" value="停止" onclick="stop1()">
    <input type="button" value="反转" onclick="reverse()">
    <input type="button" value="转1圈" onclick="circle(1)">
    转<input type="text" size="1" value="" onblur="circle(this.value)">圈

</div>
</body>
<script>
    function circle(n){
        //处于停止状态
        if(img1.className==''){
            start1()
        }
        //已经在转了
        setTimeout(stop1,2000*n)


    }

    //反转
    function reverse(){
        img1.className='rfc'
    }

    //转起来
    function start1() {
        img1.className='fc'
    }
    //停下来
    function stop1() {
        img1.className=''
    }

</script>

查看成品：

js实现旋转大风车

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。