醉美水芙蓉 发表于 2024-9-3 20:32

蜻蜓与秋蝉

本帖最后由 醉美水芙蓉 于 2024-9-3 21:29 编辑 <br /><br /><style>
#papa {
        margin: 30px 0 30px calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 570px;
        background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a448aa49fb7eae014c5c3ecb00108c6c_preview.webp ') no-repeat center/cover;
        box-shadow: 0 0 8px #333;
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: snow;
        box-shadow: 100px 0 0 plum, 0 50px 0 lightyellow;
}
#player {
        position: absolute;
        width: 60px;
        height: 60px;
        filter: drop-shadow(0 0 1px darkgreen);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
.leaf {
        position: absolute;
        left: -50%;
        top: -50%;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, yellow, red);
        border-radius: 100% 50%;
        opacity: .95;
        transform-origin: 100% 100%;
        transform: rotate(var(--deg)) translateY(60px);
}

@keyframes moving {
        from { opacity: 0; transform: ratate(0) translate(0,0) scale(0.2); }
        to { opacity: 1; transform: rotate(60deg) translate(var(--x0),var(--y0)) scale(1.5); }
}
@keyframes rot { to { transform: rotate(360deg); } };
</style>

<div id="papa">
        <div id="player"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2621347801" autoplay loop></audio>
</div>

<script>
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

Array(total=5).fill('').forEach((i,k) => {
        i = document.createElement('span');
        i.className = 'leaf';
        i.style.cssText += `--deg: ${360/total * k}deg;`;
        player.appendChild(i);
});

for(var i = 0, all = 80; i < all; i++) {
        let lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / all * i;
        let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu), size = Math.ceil(Math.random() * 5 + 5);
        lz.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                width: ${size}px;
                height: ${size}px;
                animation: moving ${Math.random() * 5 + 5}s -${Math.random() * 10}s linear infinite var(--state);
        `;
        papa.prepend(lz);
}

aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-9-3 20:37

播放器叶片可以考虑非纯色，使用现在的主色颜色加偏红的色彩做渐变。这只是建议，可以试试效果。

花飞飞 发表于 2024-9-3 20:56

水妞把背景换成了动画，很有氛围感，漂亮。。{:4_187:}

醉美水芙蓉 发表于 2024-9-3 21:27

马黑黑 发表于 2024-9-3 20:37
播放器叶片可以考虑非纯色，使用现在的主色颜色加偏红的色彩做渐变。这只是建议，可以试试效果。

谢谢黑黑老师指导！

醉美水芙蓉 发表于 2024-9-3 21:27

花飞飞 发表于 2024-9-3 20:56
水妞把背景换成了动画，很有氛围感，漂亮。。

花花来了！晚上好！

醉美水芙蓉 发表于 2024-9-3 21:30

马黑黑 发表于 2024-9-3 20:37
播放器叶片可以考虑非纯色，使用现在的主色颜色加偏红的色彩做渐变。这只是建议，可以试试效果。

黑黑老师的想法真不错，谢谢老师了！改好了！

小辣椒 发表于 2024-9-3 21:48

水芙蓉这个制作漂亮的，欣赏精彩的制作{:4_171:}

醉美水芙蓉 发表于 2024-9-3 22:32

小辣椒 发表于 2024-9-3 21:48
水芙蓉这个制作漂亮的，欣赏精彩的制作

谢谢小辣椒支持！

朵拉 发表于 2024-9-3 22:50

好看 好听~~

醉美水芙蓉 发表于 2024-9-3 22:51

朵拉 发表于 2024-9-3 22:50
好看 好听~~

谢谢朵拉美女鼓励！

马黑黑 发表于 2024-9-3 23:02

醉美水芙蓉 发表于 2024-9-3 21:30
黑黑老师的想法真不错，谢谢老师了！改好了！

{:4_199:}

马黑黑 发表于 2024-9-3 23:03

醉美水芙蓉 发表于 2024-9-3 21:27
谢谢黑黑老师指导！

{:4_190:}

起个网名好难 发表于 2024-9-4 07:33

https://cccimg.com/view.php/d42eed8c66ea154d17ce2e4f4ca9608c.webp

醉美水芙蓉 发表于 2024-9-4 11:42

起个网名好难 发表于 2024-9-4 07:33


谢谢老师光临鼓励！

世外桃源 发表于 2024-9-4 12:31

欣赏欣赏

世外桃源 发表于 2024-9-4 12:31

感谢分享

醉美水芙蓉 发表于 2024-9-4 21:18

世外桃源 发表于 2024-9-4 12:31
欣赏欣赏

谢谢朋友支持！
页: [1]
查看完整版本: 蜻蜓与秋蝉