|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-4-13 07:47 编辑
css-doodle加餐教程(三)
css-doodle四叶草与音乐关联
在 css-doodle加餐教程(二) 里,四叶草通过CSS关键帧动画已经能够旋转了,我们还通过 :doodle(:hover) {} 伪类选择器令动画可以控制。现在,让我们更进一步,令四叶草和音乐关联起来,换言之,用 css-doodle 做成的四叶草做一个音乐音乐播放控制器。下面是完整代码,这组代码可以完美地在 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 页面里运行:
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571858" autoplay="autoplay" loop="loop"></audio>
<css-doodle grid="1">
:doodle {
@size: 160px;
cursor: pointer;
--state: paused;
}
background: rgb(20,20,200);
@shape: clover,4;
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<script>
let dd = document.querySelector('css-doodle'); // ①
let mState = () => dd.style.setProperty('--state', aud.paused ? 'paused' : 'running'); // ②
aud.addEventListener('play', mState, false); // ③
aud.addEventListener('pause', mState, false); // ④
dd.onclick = () => aud.paused ? aud.play() : aud.pause(); //⑤
</script>
<audio> 标签大家已经很熟悉了,无需解释。
<css-doodle>标签代码和之前的两个教程有继承性和衔接性,道理一样,也无需解释。
现在来看看JS代码,我们经常使用的,这里给大家一个复习的机会:
在第 ① 句,我们先声明一个变量,dd,dd变量的赋值是通过对选择器 css-doodle 用JS的 queryselector 内置函数获得,这样我们就可以对文档中第一个 <css-doodle> 选择器即我们的四叶草进行操控了。
接着,在第 ② 句,我们建立了一个自定义函数 mState() 函数,这个函数操纵四叶草(它现在叫 dd)的CSS变量变量 --state,音乐若暂停,它也取暂停(paused)的值,反之取运行(running)的值。
然后这个 mState() 函数分别通过监听 audio 播放器的两个事件,play 播放事件、pause 暂停事件得到运行(第 ③ ④ 句),其结果是,不论音乐处于播放中还是暂停中, --state 变量都得到正确赋值,关键帧动画运行与否因此与音乐的播放/暂停状态紧密关联。
最后,第 ⑤ 句,编写一个 dd 即四叶草的单击事件,该事件这么运作:如果音乐处于暂停状态(paused),则单击时令音乐播放( play() ),反正,令音乐暂停( pause() )。
至此,大功告成。
两个应用实例:
① http://qhxy.52qingyin.cn/art/bsh ... art=uvuz_1681216168
② http://qhxy.52qingyin.cn/art/bshow.php?st=3&sd=3&art=1681304088
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|