一个很好玩的动画效果

最新推荐文章于 2024-05-06 10:11:59 发布

似曾～相识

最新推荐文章于 2024-05-06 10:11:59 发布

阅读量144

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_45634533/article/details/102749352

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>好玩的动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            font-size: 62.5%;
            font-family: 'Microsoft Yahei';
            box-sizing: border-box;
        }

        html,
        body {
            overflow: hidden;
             background-color: gray;
        }

        img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 80vh;
            margin: auto;
        }

        button {
            margin: 25px;
            padding: 10px;
            border: none;
            background: lightblue;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = () => {
            // 获取元素
            var pic = document.querySelector('img'); // 图片
            var start = document.querySelector('.start'); // 开始旋转按钮
            var end = document.querySelector('.end'); // 停止旋转按钮
            //设置初始的旋转角度
            pic.style.transform = 'rotate(0deg)'
            var rotate = 0;

            // 给按钮添加点击事件
            start.onclick = () => {
                // 用于多次点击开始按钮时先清除上一个计时器
                clearInterval(timeID)
                // 声明一个计时器
                var timeID = setInterval(() => {
                    var step = 36
                    rotate -= 36
                    pic.style.transform = ' rotate(' + rotate + 'deg)'
                }, 180)

                // 给停止旋转按钮添加点击事件
                end.onclick = function () {
                    clearInterval(timeID)
                }
            }
        }
    </script>
</head>

<body>
    <img src=" https://5b0988e595225.cdn.sohucs.com/images/20180117/6fb6a89a557848faa1e148d402c7e870.gif">
    <button class="start">开始旋转</button>
    <button class="end">停止旋转</button>
</body>

</html>

似曾～相识

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个很好玩的动画效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录