论坛 › 欢乐水吧 › 《The Dream》TO岁月·如歌

红影 发表于 2023-12-16 22:05

《The Dream》TO岁月·如歌

<style>
#papa {
    margin: 80px 0 0 calc(50% - 631px);
    width: 1100px;
    height: 600px;
    background: #666 url('https://pic.imgdb.cn/item/657d9775c458853aef639e09.jpg') no-repeat center/cover;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 3px 6px 12px gray;
    position: relative;
   border-radius: 12px;
    --state: paused;
}
    #player {
    display: grid;
    place-items: center;
    width: 300px;
    height: 300px;
    position: absolute; bottom:10px;
    cursor: pointer;
    background: url('https://pic.imgdb.cn/item/657d98c5c458853aef6a7866.png') no-repeat center/cover;
    animation: rotating 18s linear infinite var(--state);
}
#player::before, #player::after {
    position: absolute;
    content: '';
    width: 120%;
    height: 120%;
    background: inherit;
    transform: rotate(135deg);
    filter: hue-rotate(20deg) opacity(.7);
}
#player::after {
    width: 100%;
    height: 100%;
    transform: rotate(240deg) saturate(255);
}
li-zi {
    position: absolute;
    width: 60px;
    height: 2px;
    border-radius: 100% 20%;
    background: tan;
    animation: imov 6s infinite;
}
@keyframes moving {
    from { opacity: 1; transform: rotate(-22deg) translate(0,0); }
    to { opacity: 0; transform: rotate(-22deg) translate(var(--x0),var(--y0)); }
}
@keyframes rotating {
    to { transform: rotate(-360deg); }
}
#pic1 { position: absolute;left: 40px; top: 0px; width: 300px; height: 300px; opacity: 1; z-index: 3; }
</style>

<div id="papa">
    <img id="pic1" src="https://pic.imgdb.cn/item/657dad2fc458853aefd7f0e2.gif" alt="" />
    <div id="player" title="播放/暂停"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1765342" autoplay loop></audio>
</div>

<script>

(function() {

let all = 80;
for(let i = 0; i < all; i++) {
    let movBall = document.createElement('li-zi');
      let hudu = Math.PI / 180 * -22;
      let xx = 332 + 590 * Math.cos(hudu), yy = 148 + 590 * Math.sin(hudu) + 4 * i;
      movBall.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                top: 148px; left: 332px;
                background: linear-gradient( to left, rgba(255,255,255,.8), rgba(200,200,200,.15));
                animation: moving ${Math.random() * 30 + 30}s -${Math.random() * 30}s infinite var(--state);
      `;
      papa.prepend(movBall);
}
let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

红影 发表于 2023-12-16 22:12

感谢岁月如歌的礼物，做个小礼作为回赠，祝福每天能有安稳好梦@岁月·如歌{:4_204:}

红影 发表于 2023-12-16 22:13

学黑黑的《关山月》代码，感谢黑黑代码{:4_187:}

红影 发表于 2023-12-16 22:17

想让那些粒子平行地沿着那个背景里的线条前行，发现后面的粒子还是偏移了@马黑黑{:4_173:}

红影 发表于 2023-12-16 22:20

本来想让y值增加是为了让那些粒子分出来，结果散开来了。

马黑黑 发表于 2023-12-17 07:53

红影 发表于 2023-12-16 22:17
想让那些粒子平行地沿着那个背景里的线条前行，发现后面的粒子还是偏移了@马黑黑

关键帧动画里，rotate 角度在 from 和 to 一致就不会发生偏移，这时，rotate 的作用是调整姿势

亦是金 发表于 2023-12-17 10:11

问好红影！红影学以致用，这么快就新帖了！好看，棒棒哒！{:4_187:}

亦是金 发表于 2023-12-17 10:15

星星动画能控制停止吗？我在满世界找这个代码呢！{:4_203:}

幸运草 发表于 2023-12-17 10:17

系梦在天上飞么{:6_242:}

小文 发表于 2023-12-17 11:13

这个梦真美仑美奂，精采！{:4_187:}{:4_191:}{:4_173:}

红影 发表于 2023-12-17 11:37

马黑黑 发表于 2023-12-17 07:53
关键帧动画里，rotate 角度在 from 和 to 一致就不会发生偏移，这时，rotate 的作用是调整姿势

我本来就取了一致的，还好发散不是很厉害，就这样吧{:4_173:}

红影 发表于 2023-12-17 11:38

亦是金 发表于 2023-12-17 10:11
问好红影！红影学以致用，这么快就新帖了！好看，棒棒哒！

谢谢亦是金老师鼓励，我本来也差不多就是套用啊{:4_173:}{:4_187:}

红影 发表于 2023-12-17 11:39

亦是金 发表于 2023-12-17 10:15
星星动画能控制停止吗？我在满世界找这个代码呢！

我记得动图也可以停止的，在黑黑很早以前的帖子里有过，一下子想不起来{:4_173:}

红影 发表于 2023-12-17 11:39

幸运草 发表于 2023-12-17 10:17
系梦在天上飞么

是啊，而且都是美梦呢{:4_173:}

焱鑫磊 发表于 2023-12-17 11:39

棒棒哒！赞！{:4_204:}

红影 发表于 2023-12-17 11:40

小文 发表于 2023-12-17 11:13
这个梦真美仑美奂，精采！

多谢小文，我也只是套用代码做的{:4_173:}

红影 发表于 2023-12-17 11:51

焱鑫磊 发表于 2023-12-17 11:39
棒棒哒！赞！

问好焱鑫磊，感谢鼓励{:4_187:}

岁月·如歌 发表于 2023-12-17 18:57

哇，眼前一亮，飞天的感觉{:4_204:}{:4_199:}

岁月·如歌 发表于 2023-12-17 18:58

这场景，星球大战了，真棒！

岁月·如歌 发表于 2023-12-17 19:00

又或者是太空旅游团，下一站，太阳系之地球站{:4_199:}

查看完整版本: 《The Dream》TO岁月·如歌