使用js写一个旋转大风车的案例

最新推荐文章于 2023-09-08 21:36:22 发布

wwwwnby

最新推荐文章于 2023-09-08 21:36:22 发布

阅读量568

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45803680/article/details/111060112

版权

相信大家都对风车这个东西感到不陌生，所以我们今天就要写一个大风车的案例.
这是一个动态网页，下面是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="../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>

查看成品：
在这里插入图片描述

wwwwnby

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用js写一个旋转大风车的案例

相信大家都对风车这个东西感到不陌生，所以我们今天就要写一个大风车的案例.这是一个动态网页，下面是css文件的代码，废话少说，上代码：<style> .fc{ animation:wm 2s infinite linear; } @keyframes wm { from { transform:rotate(0deg); }
复制链接

扫一扫