css-doodle加餐教程（三）

马黑黑 · 发表于 2023-4-13 07:43

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

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