论坛 › 动画音画 › 祈祷

马黑黑 发表于 2023-7-2 13:42

祈祷

本帖最后由 马黑黑 于 2023-7-2 13:52 编辑 <br /><br /><style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t23/2/sea0a.jpg') no-repeat center/cover;
        box-shadow: 0 0 6px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
        --state: paused;
}
#mydiv::before {
        position: absolute;
        content: '';
        width: 178px;
        height: 187px;
        left: calc(50% - 66px);
        bottom: -20px;
        border-radius: 50%;
        cursor: pointer;
        transform: rotate(-90deg);
        z-index: 999;
        background: transparent url('https://files.superbed.cn/store/superbed/e8/61/64a0d24e1ddac507cc24e861.png') no-repeat;

        animation: swim 2s steps(6) infinite var(--state);
}
li-zi {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 160px;
        width: 20px;
        height: 20px;
        background: snow;
        border-radius: 50%;
        animation: move 10s var(--delay) infinite alternate var(--state);
        --deg: 30deg; --xx: -200px; --delay: 0;
}
@keyframes move {
        from { transform: rotate(0deg) translateY(0px); opacity: 1; }
        to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
@keyframes swim{
        0%{ background-position:0px 0px; }
        100%{ background-position:0px -1122px; }
}
</style>

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

<script>
(function (){
        let total = 50;
        let createLizi = (mum,sons) => {
                Array.from({length: sons}).forEach( (s,k) => {
                        let xx = 6 + Math.ceil(Math.random() * 10);
                        s = document.createElement('li-zi');
                        s.style.cssText += `
                                width: ${xx}px;
                                height: ${xx}px;
                                left: calc(50% - ${xx / 2}px);
                                --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
                                --xx: -${300 + Math.ceil(Math.random() * 600)}px;
                                --delay: -${Math.random() * 20}s;
                        `;
                        mum.appendChild(s);
                });
        };
        createLizi(mydiv,total);
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-7-2 13:43

本帖最后由 马黑黑 于 2023-7-2 13:53 编辑

帖子代码
<style>
#mydiv {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t23/2/sea0a.jpg') no-repeat center/cover;
        box-shadow: 0 0 6px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
        --state: paused;
}
#mydiv::before {
        position: absolute;
        content: '';
        width: 178px;
        height: 187px;
        left: calc(50% - 66px);
        bottom: -20px;
        border-radius: 50%;
        cursor: pointer;
        transform: rotate(-90deg);
        z-index: 999;
        background: transparent url('https://files.superbed.cn/store/superbed/e8/61/64a0d24e1ddac507cc24e861.png') no-repeat;
        animation: swim 2s steps(6) infinite var(--state);
}
li-zi {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 160px;
        width: 20px;
        height: 20px;
        background: snow;
        border-radius: 50%;
        animation: move 10s var(--delay) infinite alternate var(--state);
        --deg: 30deg; --xx: -200px; --delay: 0;
}
@keyframes move {
        from { transform: rotate(0deg) translateY(0px); opacity: 1; }
        to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
@keyframes swim{
        0%{ background-position:0px 0px; }
        100%{ background-position:0px -1122px; }
}
</style>

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

<script>
(function (){
        let total = 50;
        let createLizi = (mum,sons) => {
                Array.from({length: sons}).forEach( (s,k) => {
                        let xx = 6 + Math.ceil(Math.random() * 10);
                        s = document.createElement('li-zi');
                        s.style.cssText += `
                                width: ${xx}px;
                                height: ${xx}px;
                                left: calc(50% - ${xx / 2}px);
                                --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
                                --xx: -${300 + Math.ceil(Math.random() * 600)}px;
                                --delay: -${Math.random() * 20}s;
                        `;
                        mum.appendChild(s);
                });
        };
        createLizi(mydiv,total);
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-7-2 13:43

感谢 @南无月 修改了乌龟图片！

醉美水芙蓉 发表于 2023-7-2 13:58

红影 发表于 2023-7-2 15:49

这回成了乌龟吐泡泡啊，可怜的小乌龟，游了半天都没动地方{:4_173:}

红影 发表于 2023-7-2 15:55

这个场景很漂亮{:4_199:}

马黑黑 发表于 2023-7-2 16:53

红影 发表于 2023-7-2 15:49
这回成了乌龟吐泡泡啊，可怜的小乌龟，游了半天都没动地方

乌龟赛跑活动结束了

马黑黑 发表于 2023-7-2 16:53

红影 发表于 2023-7-2 15:55
这个场景很漂亮

水族景象都很迷人

马黑黑 发表于 2023-7-2 16:53

醉美水芙蓉 发表于 2023-7-2 13:58
欣赏老师新作品！

下午好

小文 发表于 2023-7-2 17:18

好美的场景！欣赏！

红影 发表于 2023-7-2 19:24

马黑黑 发表于 2023-7-2 16:53
乌龟赛跑活动结束了

赛跑之后就吐泡泡，小乌龟真累。{:4_173:}

红影 发表于 2023-7-2 19:25

马黑黑 发表于 2023-7-2 16:53
水族景象都很迷人

是的，一般都很悠然而且色彩漂亮{:4_187:}

马黑黑 发表于 2023-7-2 19:25

红影 发表于 2023-7-2 19:24
赛跑之后就吐泡泡，小乌龟真累。

这是休息的方式

马黑黑 发表于 2023-7-2 19:26

红影 发表于 2023-7-2 19:25
是的，一般都很悠然而且色彩漂亮

没错。不过有一些场景，尤其是海底的，会令人毛骨悚然

梦缘 发表于 2023-7-2 19:31

欣赏精彩佳作，谢谢分享，点赞！{:4_178:}

马黑黑 发表于 2023-7-2 19:33

梦缘 发表于 2023-7-2 19:31
欣赏精彩佳作，谢谢分享，点赞！

{:4_190:}

红影 发表于 2023-7-2 19:36

马黑黑 发表于 2023-7-2 19:25
这是休息的方式

有道理，安排的还挺合理的。{:4_173:}

红影 发表于 2023-7-2 19:37

马黑黑 发表于 2023-7-2 19:26
没错。不过有一些场景，尤其是海底的，会令人毛骨悚然

通常不要去深海，应该景色都不错。

马黑黑 发表于 2023-7-2 19:37

红影 发表于 2023-7-2 19:37
通常不要去深海，应该景色都不错。

还行，过得去

马黑黑 发表于 2023-7-2 19:37

红影 发表于 2023-7-2 19:36
有道理，安排的还挺合理的。

就是

查看完整版本: 祈祷