小辣椒 发表于 2024-7-20 16:36

明月千里寄相思 （学习黑黑《游魂飞魄》代码效果）

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 765px);
        width: 1369px;
        height: 706px;
        background: url('https://wj.zp68.com/lxx/yunhua/2024/07/20/01.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.6);
        z-index: 1;
        pointer-events: none;
        display: grid;
        place-items: center;
        position: relative;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 420px;
        height: 420px;
        border-radius: 50% 50% 0 50%;
        transform: rotate(-10deg);
        background: radial-gradient(Snow 1px, transparent 0) center / 24px 22px;
        top:50px;
        left:160px;       
        animation: bgchg 6s infinite alternate var(--state);
}

#player { position: absolute; left: 620px; top: 580px; width: 100px; height: 100px; z-index: 2; pointer-events: auto; cursor: pointer; filter: hue-rotate(170deg); opacity: .45;; animation: rot 8s linear infinite var(--state); }


#mydiv::after { right: 260px; top: 80px; animation-delay: -10s; }
@keyframes bgchg { to { background-size: 48px 24px; filter: hue-rotate(360deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv"><img id="player" alt="" title="播放" src="https://xlaj.cn/assets/file/zp/20240627020733.png " /></div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/07/20/01.mp3" autoplay loop></audio>

<script>
var mState = () => {
      mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-7-20 16:37

谢谢黑黑代源码分享@马黑黑

小辣椒 发表于 2024-7-20 16:38

@红影
亲爱的，抄你的作业，就改了一下位置{:4_173:}

小辣椒 发表于 2024-7-20 16:38

好了，准备下了。时间过真快

梦油 发表于 2024-7-20 16:48

清悦、高洁、委婉动听并富有神韵古筝音色优美动听。谢谢小辣椒朋友。分享了。

红影 发表于 2024-7-20 17:05

亲爱的把小点点做到月亮里去了，好漂亮啊{:4_199:}
而且这么快就做出来了，厉害{:4_187:}

红影 发表于 2024-7-20 17:06

相思点点，寓意也特别好呢{:4_199:}

马黑黑 发表于 2024-7-20 18:27

小辣椒 发表于 2024-7-20 16:37
谢谢黑黑代源码分享@马黑黑

{:4_174:}

起个网名好难 发表于 2024-7-20 19:24

https://dingyue.ws.126.net/2021/0918/654468dag00qzm1pv00jed2008b00d8g008b00d8.gif

海笑 发表于 2024-7-21 07:17

欣赏老师佳作！

愤怒的葡萄 发表于 2024-7-21 08:27

音画制作得挺漂亮的。

老谟深虑 发表于 2024-7-21 08:31

            欣赏老师的佳作，点赞！

醉美水芙蓉 发表于 2024-7-21 17:15

小辣椒 发表于 2024-7-21 20:35

梦油 发表于 2024-7-20 16:48
清悦、高洁、委婉动听并富有神韵古筝音色优美动听。谢谢小辣椒朋友。分享了。

梦油晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-7-21 20:36

红影 发表于 2024-7-20 17:05
亲爱的把小点点做到月亮里去了，好漂亮啊
而且这么快就做出来了，厉害

啊·····亲爱的抄你的啊，怎么会慢，现在都抄你的作业了{:4_170:}

小辣椒 发表于 2024-7-21 20:37

红影 发表于 2024-7-20 17:06
相思点点，寓意也特别好呢

现成的图，就把小点点放月亮里面去了

小辣椒 发表于 2024-7-21 20:37

马黑黑 发表于 2024-7-20 18:27


黑黑晚上好{:4_187:}

小辣椒 发表于 2024-7-21 20:37

起个网名好难 发表于 2024-7-20 19:24


问好难难，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-7-21 20:38

海笑 发表于 2024-7-21 07:17
欣赏老师佳作！

问好海笑，谢谢欣赏，好久不见{:4_187:}

小辣椒 发表于 2024-7-21 20:39

愤怒的葡萄 发表于 2024-7-21 08:27
音画制作得挺漂亮的。

问好葡萄，谢谢欣赏{:4_187:}
页: [1] 2
查看完整版本: 明月千里寄相思 （学习黑黑《游魂飞魄》代码效果）