js---大风车呀转悠悠

最新推荐文章于 2021-02-04 17:51:18 发布

꧁এ悲宸๓₯㎕

最新推荐文章于 2021-02-04 17:51:18 发布

阅读量274

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44889894/article/details/110881407

版权

JavaScript CSS动画旋转动画交互设计网页特效

关键词由CSDN通过智能技术生成

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js实现大风车旋转


 1. 点击开始风车开始旋转 
 2. 点击反转，风车进行逆时针旋转 
 3. 点击转一圈，则只会顺时针转一圈，输入转的圈数，则转指定圈数 
 4. 点击停止，风车停止转动

效果实现：
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大风车呀转悠悠</title>
    <style>
        .fc{
            animation:wm 1s infinite linear;
        }
        @keyframes wm {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(-360deg);
            }
        }
        .reverse{
            animation:rer 1s infinite linear;
        }
        @keyframes rer {
            from {
                transform:rotate(-360deg);
            }
            to {
                transform:rotate(0deg);
            }
        }
    </style>
</head>
<body>
<div>
    <h3>大风车呀转悠悠</h3>
    <img src="img/logo.png" class="a" 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 start1() {
        img1.className='fc'
    }
    //停下来
    function stop1() {
        img1.className=''
    }
    function reverse() {
        img1.className='reverse'
    }
    function circle(n) {
        let circle1 = document.getElementById("img1");
        circle1.className='fc'
        a=setTimeout(function (){
            stop1()
        },1000*n)
    }
</script>
</html>

很好玩哟，你确定不来试试吗？

꧁এ悲宸๓₯㎕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js---大风车呀转悠悠

js实现大风车旋转 1. 点击开始风车开始旋转 2. 点击反转，风车进行逆时针旋转 3. 点击转一圈，则只会顺时针转一圈，输入转的圈数，则转指定圈数 4. 点击停止，风车停止转动效果实现：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大风车呀转悠悠</title> <style
复制链接

扫一扫

专栏目录