UID217
阅读权限150
主题
帖子
精华
积分139198
文采 点
钻石 颗
鲜花 朵
金币 枚
注册时间2020-7-30
最后登录1970-1-1
|

楼主 |
发表于 2025-8-5 20:23
|
显示全部楼层
- <style>
- #mama {
- position: relative;
- margin: 20px auto;
- width: 800px;
- height: 450px;
- background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
- }
- #mypic {
- position: absolute;
- left: 20px;
- top: 10px;
- width: 120px;
- height: 120px;
- cursor: pointer;
- animation: rot 8s linear infinite var(--state);
- --state: running;
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- </style>
-
- <div id="mama">
- <audio id="aud" src="http://music.163.com/song/media/outer/url?id=2730277172.mp3" autoplay loop></audio>
- <img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
- </div>
-
- <script>
- //JS代码 : 四叶草点击事件
- mypic.onclick = () => {
- aud.paused ? aud.play() : aud.pause();
- mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- };
- </script>
复制代码
|
|