【凡哥教程第六讲作业】【花简静】晚霞灿然（让转动小播控制音乐）

花简静

花简静

<!-- 第一部分 ：css代码 --> <style> #mama {     position: relative;     margin: 130px 0 30px calc(50% - 931px);     width: 1700px;     height: 900px;     background: url('https://pic.imgdb.cn/item/66a36942d9c307b7e9785456.webp') no-repeat center/cover; } #mypic {     position: absolute;     right: 490px;     top: 160px;     width: 150px;     height: 150px;     border-radius: 50%;     cursor: pointer; /* 指针图标设置 ：指针移动其上时呈现手型图标 */     animation: rot 8s linear infinite var(--state);     --state: running; } @keyframes rot { to { transform: rotate(360deg); } } </style>   <!-- 第二部分 ：html代码 --> <div id="mama">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=523696075" autoplay loop></audio>     <img id="mypic" alt="" src="https://642303.freep.cn/642303/za/00_133633102473671250.png" /> </div>   <!-- 第三部分 ：JS代码 --> <script> mypic.onclick = () => {     aud.paused ? aud.play() : aud.pause();     mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running'); }; </script>

花简静

凡哥教程第六讲作业：
本节内容艰涩，所以不留作业，大家多多地去理解本节的内容就好

完成情况：
各位音画爱好者：
这个代码要看一遍就理解，不容易。
但是，看一遍后呢照抄照抄都没问题。

理解多少看你看了多少遍有关，以后做贴么，做着做着就都明白了。

花简静

以上代码多加了JS部分控制，老师说难，实际上这部分照抄，完全不用改，最简单了。（千万不能改，你一改它就不听控制了）

要改的还是CSS和HTML部分的内容，
小播的位置，
图片大小
图片居中方法等。。
这些还是旧作业。

花简静

https://music.163.com/song/media/outer/url?id=523696075
这个是网易音乐地址。
523696075这个ID改为你自己的音乐ID数字即可

雨声

花简静 发表于 2024-7-26 17:25
凡哥教程第六讲作业：
本节内容艰涩，所以不留作业，大家多多地去理解本节的内容就好

哈哈~~~我只看到关键词句，可以炒作业

雨声

花简静 发表于 2024-7-26 17:28
以上代码多加了JS部分控制，老师说难，实际上这部分照抄，完全不用改，最简单了。（千万不能改，你一改它就 ...

静宝的讲解太到位了，爱你，我的静宝宝

雨声

花简静 发表于 2024-7-26 17:30
https://music.163.com/song/media/outer/url?id=523696075
这个是网易音乐地址。
523696075这个ID改为你自 ...

这个是换音乐的地址对吧，静宝！

雨声

静宝的素材都很美，这些作业对静宝来说捻手就来，静宝对代码的悟性大强大了，我家静宝老厉害了

花简静

雨声 发表于 2024-7-26 17:32
哈哈~~~我只看到关键词句，操作业

裂墙支持抄作业。。。
不支持自己写代码。。