朵拉 发表于 2023-12-25 21:03

栀子花的约定（马黑黑原创）

本帖最后由 朵拉 于 2025-2-26 21:02 编辑 <br /><br /><style>
#papa {
      margin: 10px 0 10px calc(50% - 721px);
      width: 1280px;
      height: 720px;
      background: url('https://pic.imgdb.cn/item/65897deac458853aef83cc98.webp') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
}
#mypic {
      position: absolute;
      mix-blend-mode: exclusion;
      cursor: pointer;
      transition: filter 1s;
      animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
      filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
li-zi {
      position: absolute;
      width: 50px;
      height: 1px;
      background: linear-gradient(to right,snow,yellow);
      animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
      from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
      to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" title="暂停/播放" />
      <audio id="aud" src="https://www.kumeiwp.com/wj/152582/2023/05/19/7b6c8a2618a0a2e92892f64122d69cc8.mp3" autoplay="" loop=""></audio>
</div>

<script>
let total = 160;
Array.from({length: total}).forEach((lz,key) => {
      lz = document.createElement('li-zi');
      let hudu = Math.PI / 180 * 360 / total * key;
      let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
      lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${2 + Math.random() * 2}s;
                --de: -${Math.random() * 3}s;
      `;
      papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2023-12-25 21:10

@马黑黑
马师 晚上好，学生交作业，请指正哈{:4_190:}

马黑黑 发表于 2023-12-25 21:17

{:4_174:}

朵拉 发表于 2023-12-25 21:19

等有时间 把这张图图做个音画哈~~

红影 发表于 2023-12-25 21:48

这个套用就换个图片和音乐啊，连按钮都原来的{:4_173:}

樵歌 发表于 2023-12-26 08:53

一个个的都成学霸了！

亦是金 发表于 2023-12-26 09:58

黑黑老师的好学生真多！点赞！{:4_187:}
页: [1]
查看完整版本: 栀子花的约定（马黑黑原创）