梦江南 发表于 2024-7-30 16:03

学习帖【海边】


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/66a8970fd9c307b7e9ef478d.png') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        overflow: hidden;
        z-index: 1;
        display: grid;
        place-items: center;
        position: relative;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: -100px;
        background: repeating-conic-gradient(at 50px 50px , transparent 0%, rgba(0,255,240,245) 4%, transparent 8%);
        transform-origin: 50px 50px;
        animation: swear 5s infinite alternate var(--state);
}
#player {
        position: absolute;
        width: 200px;
        height:200px;
        border-radius: 50%;
        border: 12px double rgba(55,0,0,139);
        cursor: pointer;
        animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border-radius: inherit;
        border: inherit;
}
#player::before {
        inset: 12px;
        border-style: double solid;
        border-color: rgba(68,139,0,139);
}
#player::after { inset: 48px; border-style: dotted; }
li-zi {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        box-shadow: inset 0 0 10px lightblue;
        animation: up 4s linear infinite var(--state);
}
@keyframes swear {
        from { transform: rotate(-6deg); }
        to { transform: rotate(6deg); }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes up {
        to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>

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

<script>
Array.from({length: 60}).forEach(i => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${50 + Math.floor(Math.random() * 100)}px;
                top: 55px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation-delay: -${Math.random() * 4}s;
                --yy: ${500 * }px;
        `;
        player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

起个网名好难 发表于 2024-7-30 16:14

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

梦油 发表于 2024-7-30 16:26

住在海边真快活。

梦江南 发表于 2024-7-30 17:07

起个网名好难 发表于 2024-7-30 16:14


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

梦江南 发表于 2024-7-30 17:09

梦油 发表于 2024-7-30 16:26
住在海边真快活。

是啊，生活在海边夏天是多么惬意。谢谢梦油老师支持。{:4_204:}

红影 发表于 2024-7-30 17:26

锥形渐变的加入，让这海边的风景更漂亮了。
欣赏梦江南好帖{:4_187:}

红影 发表于 2024-7-30 17:27

小播颜色改成了自己想要的颜色，这真棒。
梦江南的学习十分认真，很赞{:4_199:}

红影 发表于 2024-7-30 17:29

好听的口琴曲，听曲赏帖，真是好享受。感谢梦江南带来的好帖{:4_187:}

樵歌 发表于 2024-7-30 21:36

光影投射得好漂亮！

竹溪 发表于 2024-7-31 07:39

蓝蓝的一片海，漂亮。欣赏老师好帖{:4_204:}

梦江南 发表于 2024-7-31 13:08

红影 发表于 2024-7-30 17:26
锥形渐变的加入，让这海边的风景更漂亮了。
欣赏梦江南好帖

谢谢影子欣赏点评。祝趱日安康！{:4_204:}

梦江南 发表于 2024-7-31 13:11

红影 发表于 2024-7-30 17:27
小播颜色改成了自己想要的颜色，这真棒。
梦江南的学习十分认真，很赞

小播颜色与海水撞色了看不清，就试着换了色。成功了好开心。{:4_173:}

梦江南 发表于 2024-7-31 13:13

红影 发表于 2024-7-30 17:29
好听的口琴曲，听曲赏帖，真是好享受。感谢梦江南带来的好帖

换种音乐，口琴也蛮好听的。谢谢分享。{:4_187:}

梦江南 发表于 2024-7-31 13:14

樵歌 发表于 2024-7-30 21:36
光影投射得好漂亮！

谢谢樵歌管委分享支持，祝夏日安康！{:4_204:}

梦江南 发表于 2024-7-31 13:16

竹溪 发表于 2024-7-31 07:39
蓝蓝的一片海，漂亮。欣赏老师好帖

问好竹溪老师分享，祝夏日安康！{:4_204:}

海笑 发表于 2024-7-31 14:28

欣赏老友佳作！

梦油 发表于 2024-7-31 14:42

梦江南 发表于 2024-7-30 17:09
是啊，生活在海边夏天是多么惬意。谢谢梦油老师支持。

现在只能是在海边玩上一两天。

梦江南 发表于 2024-7-31 15:31

海笑 发表于 2024-7-31 14:28
欣赏老友佳作！

谢谢老友欣赏支持，问好！{:4_204:}

梦江南 发表于 2024-7-31 15:34

梦油 发表于 2024-7-31 14:42
现在只能是在海边玩上一两天。

能在海边玩上一天也够了。

梦油 发表于 2024-7-31 17:09

梦江南 发表于 2024-7-31 15:34
能在海边玩上一天也够了。

我生长在北京，在大海休闲的时间很少。
页: [1] 2
查看完整版本: 学习帖【海边】