梦江南 发表于 2024-8-3 14:26

学习帖【毛宁唱 涛声依旧】

本帖最后由 梦江南 于 2024-8-3 14:34 编辑 <br /><br /><style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/66adc79fd9c307b7e9551b46.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://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
        bottom: 120px;
        content: url('https://pic.imgdb.cn/item/66adcadbd9c307b7e95f0614.gif');
        -webkit-mask: radial-gradient(circle, red,transparent);
        opacity: .9;
}
li-zi {
        position: absolute;
        left: calc(50% - 5px);
        bottom: 0;
        width: 10px;
        height: 10px;
        border-radius: 0 60%;
        box-shadow: inset 0 0 10px yellow;
        animation: fly 6s linear infinite var(--state);
}
@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=1950608649" autoplay loop></audio>
</div>

<script>
Array.from({length: 100}).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-3 14:38

怎一个美字了得！

走过岁月 发表于 2024-8-3 14:56

欣赏梦江南的作品

梦江南 发表于 2024-8-3 15:07

梦油 发表于 2024-8-3 14:38
怎一个美字了得！

问好梦油老师，谢谢沙发支持。{:4_204:}

梦江南 发表于 2024-8-3 15:09

走过岁月 发表于 2024-8-3 14:56
欣赏梦江南的作品

问好岁月老师，谢谢支持。{:4_204:}

梦油 发表于 2024-8-3 16:37

梦江南 发表于 2024-8-3 15:07
问好梦油老师，谢谢沙发支持。

梦江南朋友别客气。

红影 发表于 2024-8-3 16:50

这画面好美，给梦江南点赞{:4_199:}

红影 发表于 2024-8-3 16:50

江南每个作业都及时完成，太赞了{:4_199:}

起个网名好难 发表于 2024-8-3 17:42

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

小辣椒 发表于 2024-8-3 23:55

梦江南好棒！每个作业都能够速度完成，赞的！{:4_199:}

小辣椒 发表于 2024-8-3 23:55

欣赏精彩的制作{:4_187:}

梦江南 发表于 2024-8-4 08:15

梦油 发表于 2024-8-3 16:37
梦江南朋友别客气。

梦油老师早上好！{:4_204:}

梦江南 发表于 2024-8-4 08:16

红影 发表于 2024-8-3 16:50
这画面好美，给梦江南点赞

谢谢影子支持鼓励，早上好！{:4_204:}

梦江南 发表于 2024-8-4 08:40

红影 发表于 2024-8-3 16:50
江南每个作业都及时完成，太赞了

我是闲人啊，有的是时间，完成作业是应该的。
https://pic.imgdb.cn/item/666a6741d9c307b7e9aa2b68.gif

梦江南 发表于 2024-8-4 08:41

起个网名好难 发表于 2024-8-3 17:42


问好老师，谢谢支持！天热多保重 ！{:4_204:}

梦江南 发表于 2024-8-4 08:43

小辣椒 发表于 2024-8-3 23:55
梦江南好棒！每个作业都能够速度完成，赞的！

回小辣椒，我是在家闲人啊，有的是时间，不完成作业讲不过去的。您要上班哪有时间啊！{:4_204:}

梦江南 发表于 2024-8-4 08:43

小辣椒 发表于 2024-8-3 23:55
欣赏精彩的制作

谢谢支持，天热多保重！{:4_204:}

红影 发表于 2024-8-4 12:19

梦江南 发表于 2024-8-4 08:16
谢谢影子支持鼓励，早上好！

这个背景非常清爽美妙，喜欢{:4_187:}

红影 发表于 2024-8-4 12:20

梦江南 发表于 2024-8-4 08:40
我是闲人啊，有的是时间，完成作业是应该的。

这和是否闲无关，努力完成作业是学习态度问题{:4_173:}

梦江南 发表于 2024-8-4 14:13

红影 发表于 2024-8-4 12:19
这个背景非常清爽美妙，喜欢

您 喜欢就好。下午好！{:4_204:}
页: [1] 2
查看完整版本: 学习帖【毛宁唱 涛声依旧】