模拟音乐播放时图片旋转效果(css3)

最新推荐文章于 2021-06-03 14:49:50 发布

weixin_45070265

最新推荐文章于 2021-06-03 14:49:50 发布

阅读量1.4k

点赞数 9

分类专栏： HTML/CSS javascript 文章标签： css3 javascript

本文链接：https://blog.csdn.net/weixin_45070265/article/details/108021080

版权

javascript 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML/CSS

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: url("./images/04.jpg");
            background-size: cover;
            /* 执行run动画 无限循环 默认暂停*/
            animation: run 10s linear infinite paused;
        }
        /* 自定义动画 */
        @keyframes run{
            from{
                /* 旋转效果 */
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(720deg);
            }
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <!-- 音乐 默认不显示 -->
    <audio id="mv" src="./creep.mp3"></audio>
</body>
</html>
<script>
    box.onclick=function(){
        // 获取当前盒子的动画播放状态
        let status = box.style.animationPlayState
        console.log(status)
        if(status==''|| status==='paused'){//暂停状态
            // 运行动画
            box.style.animationPlayState = 'running'
            // 播放音乐
            mv.play()
        }else{
            // 暂停音乐和动画
            box.style.animationPlayState = 'paused'
            mv.pause()
        }
    }
</script>

weixin_45070265

关注

9
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
模拟音乐播放时图片旋转效果(css3)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .
复制链接

扫一扫

专栏目录