论坛 › 欢乐水吧 › 《夜曲》（学习黑黑星星背后效果）

红影 发表于 2023-4-11 21:04

《夜曲》（学习黑黑星星背后效果）

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      position: relative;
}
#pic {
      position: absolute;
      opacity: .7;
      bottom: 15px; right: 39.5%;
      animation: zhuan 12s infinitelinear var(--state);
}
.txtCeng {
      position: absolute;
      left: 300px; top: -10px;
      width: 400px;
      height: 200px;
      line-height: 200px;
      font-family: Arial, '微软雅黑';
      font-size: 4em;
      color: #eee;
      text-align: center;
      text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
      animation: chgColor 5s ease-in-out infinite alternate;
}
#wrap {
      position: absolute;
      right: 40%;
      bottom: 20px;
      width: 210px;
      height: 210px;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 10;
      animation: hue 10s infinite alternate var(--state);
}
#wrap > span {
      position: absolute;
      width: 0;
      height: 0;
      border-radius: 50%;
      border: 8px dotted hsla(60,50%,50%,.65);
      transform: rotate(var(--deg));
      animation: rot var(--time) infinite linear var(--state);
}
@keyframes rot {
      from { transform: rotate(var(--deg)); }
      to { transform: rotate(calc(var(--deg) + 360deg)); }
}
@keyframes hue {
      to { filter: hue-rotate(360deg); }
}
@keyframes zhuan {
      to { transform: rotate(360deg); }
}
@keyframes chgColor {
      0% { color: navy; }
      20% { color: green; }
      40% { color: DarkVoilet; }
      60% { color: olive; }
      80% { color: olive; }
      100% { color: RosyBrown; }
}
.vid { position: absolute; width: 1024px; height: 640px;object-fit: cover; opacity: 1; }
</style>

<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/78bf3b147e58365936c39b6e42010a08_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
      <img id="pic" src="https://pic.imgdb.cn/item/643516d60d2dde577769ee98.png" alt="" />
      <div id="wrap" title="播放/暂停"><span></span></div>
      <div class="txtCeng">夜　曲</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2528009" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
Array.from({length:7}).forEach((item,key) => {
      let sp = document.createElement('span');
      sp.style.cssText += `
                --deg: ${Math.random()*(key+10)}deg;
                --time: ${Math.random()*10+10}s;
                width: ${key*26}px;
                height: ${key*26}px;
                border-color: #${Math.random().toString(16).substr(-6)};
                border-width: ${3*key}px;
      `;
      wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2023-4-11 21:13

给圆盘播放器后面衬的线框图，顺便复习一下文字仓库里的纯css文本变色。{:4_173:}

红影 发表于 2023-4-11 21:13

谢谢黑黑的代码{:4_187:}

马黑黑 发表于 2023-4-11 21:16

用一个图片衬托播放器，十分完美！点64个赞。

亦是金 发表于 2023-4-11 21:20

好制作！精彩！欣赏学习了！{:4_187:}

红影 发表于 2023-4-11 22:27

马黑黑 发表于 2023-4-11 21:16
用一个图片衬托播放器，十分完美！点64个赞。

谢谢黑黑的代码。总数是100个赞么？那64个应该是及格了{:4_173:}

红影 发表于 2023-4-11 22:28

亦是金 发表于 2023-4-11 21:20
好制作！精彩！欣赏学习了！

谢谢亦是金鼓励，我也跟着玩一个{:4_173:}

马黑黑 发表于 2023-4-11 22:34

红影 发表于 2023-4-11 22:27
谢谢黑黑的代码。总数是100个赞么？那64个应该是及格了

这与打分无关，与点32个赞有关。

红影 发表于 2023-4-11 22:51

马黑黑 发表于 2023-4-11 22:34
这与打分无关，与点32个赞有关。

呀，翻倍的啊，开心{:4_205:}

马黑黑 发表于 2023-4-11 22:54

红影 发表于 2023-4-11 22:51
呀，翻倍的啊，开心

{:5_106:}

庶民 发表于 2023-4-12 06:24

很神秘的，点赞。

樵歌 发表于 2023-4-12 06:55

夜色沉沉，月上东山，一个美丽的特大花盘在变幻转动，不要太美啦{:4_187:}

雨中悄然 发表于 2023-4-12 08:51

影宝这个贴子特别好看。小播色块之间有线连起来一起转，看上去立体感更强，更绚丽{:4_187:}

雨中悄然 发表于 2023-4-12 08:54

构思巧妙，超级漂亮，支持老师点64个赞{:4_199:}

红影 发表于 2023-4-12 10:58

马黑黑 发表于 2023-4-11 22:54


{:4_204:}

红影 发表于 2023-4-12 10:59

庶民 发表于 2023-4-12 06:24
很神秘的，点赞。

谢谢庶民，我在跟着学习代码呢{:4_187:}

红影 发表于 2023-4-12 11:00

樵歌 发表于 2023-4-12 06:55
夜色沉沉，月上东山，一个美丽的特大花盘在变幻转动，不要太美啦

这个圆盘变幻是代码的功劳，师妹又跟着学做了一个{:4_173:}

红影 发表于 2023-4-12 11:01

雨中悄然 发表于 2023-4-12 08:51
影宝这个贴子特别好看。小播色块之间有线连起来一起转，看上去立体感更强，更绚丽

看看黑黑在播放器下衬的星星，我去找了个线框衬在下面了。
估计这样的线框图能用代码做出来的，我不会做，就直接找图图了{:4_173:}

红影 发表于 2023-4-12 11:02

雨中悄然 发表于 2023-4-12 08:54
构思巧妙，超级漂亮，支持老师点64个赞

我又跑文字仓库去搬代码了，这次搬了个变色字。忘了让它也跟暂停关联起来{:4_173:}

马黑黑 发表于 2023-4-12 12:24

红影 发表于 2023-4-12 10:58


谢花

查看完整版本: 《夜曲》（学习黑黑星星背后效果）