绿叶清舟 发表于 2024-8-4 20:51

叶落

<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 733px);
        width: 1280px;
        height: 780px;
        background: url('https://pic.imgdb.cn/item/66af72ddd9c307b7e9bc4c44.jpg') no-repeat center/cover;
        box-shadow: 2px 3px 6px rgba(0,0,0,.6);
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
        position: relative;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after {
        left: calc(50% - 60px);
        top: 20px;
        width: 120px;
        height: 120px;
        background: url('https://images.669pic.com/element_min_new_pic/94/95/67/48/9e10ecb05c589668b3d28b1680763a8f.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
mix-blend-mode: luminosity;
}
#mydiv::before {
        bottom: 120px;
        content: url('');
        -webkit-mask: radial-gradient(circle, red,transparent);
        opacity: .9;
}
li-zi {
        position: absolute;
        left: calc(50% - 5px);
        top: 10px;
        width: 20px;
        height: 20px;
        border-radius: 0 60%;
        box-shadow: inset 0 0 10px yellow;
        animation: fly 12s linear infinite var(--state);
mix-blend-mode: luminosity;
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>

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

<script>
Array.from({length: 30}).forEach(lz => {
        lz = document.createElement('li-zi');
        var idx = Math.random() > 0.5 ? 1 : -1;
        lz.style.cssText += `
                background: #${Math.random().toString(16).substring(2,8)};
                animation-delay: -${Math.floor(Math.random() * 6)}s;
                --xx: ${idx * Math.random() * 1000}px;
                --yy: ${Math.random() * 800}px;
                --deg: ${Math.random() * 720}deg;
        `;
        mydiv.appendChild(lz);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-8-4 22:00

换了飘飞的方向，颜色也调得很背景很协调。
清舟这个帖子做得好{:4_199:}

红影 发表于 2024-8-4 22:00

背景也好，这个制作非常有意境{:4_187:}

马黑黑 发表于 2024-8-4 22:28

这个挺漂亮

起个网名好难 发表于 2024-8-5 08:02

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

竹溪 发表于 2024-8-5 08:43

很奇妙的感受。欣赏老师好帖{:4_204:}

梦油 发表于 2024-8-5 09:13

这纷纷扬扬的落叶如翩翩飞舞的蝴蝶，点缀着秋日的宁静，怎一个美字了得！

绿叶清舟 发表于 2024-8-5 20:33

红影 发表于 2024-8-4 22:00
换了飘飞的方向，颜色也调得很背景很协调。
清舟这个帖子做得好

谢谢影，真到听到这歌，落叶往上飞太不象话，只能改方向了{:4_189:}

绿叶清舟 发表于 2024-8-5 20:34

梦油 发表于 2024-8-5 09:13
这纷纷扬扬的落叶如翩翩飞舞的蝴蝶，点缀着秋日的宁静，怎一个美字了得！

今年太想秋天快点来了{:4_173:}

绿叶清舟 发表于 2024-8-5 20:34

竹溪 发表于 2024-8-5 08:43
很奇妙的感受。欣赏老师好帖

谢谢竹溪支持，晚上好

绿叶清舟 发表于 2024-8-5 20:34

起个网名好难 发表于 2024-8-5 08:02


谢谢网名，晚上好

绿叶清舟 发表于 2024-8-5 20:35

马黑黑 发表于 2024-8-4 22:28
这个挺漂亮

发现直接用滤镜改颜色太方便了

起个网名好难 发表于 2024-8-5 20:48

绿叶清舟 发表于 2024-8-5 20:34
谢谢网名，晚上好

飘落的是叶子会更好些

马黑黑 发表于 2024-8-5 21:33

绿叶清舟 发表于 2024-8-5 20:35
发现直接用滤镜改颜色太方便了

{:4_181:}

红影 发表于 2024-8-5 21:45

绿叶清舟 发表于 2024-8-5 20:33
谢谢影，真到听到这歌，落叶往上飞太不象话，只能改方向了

清舟的小脑筋很灵活{:4_199:}

梦油 发表于 2024-8-6 10:53

绿叶清舟 发表于 2024-8-5 20:34
今年太想秋天快点来了

把你热坏了吧！

竹溪 发表于 2024-8-7 21:32

绿叶清舟 发表于 2024-8-5 20:34
谢谢竹溪支持，晚上好

不客气，问好老师。
页: [1]
查看完整版本: 叶落