祈祷

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: -80px 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 600px;
   
6.         background: url('https://638183.freep.cn/638183/t23/2/sea0a.jpg') no-repeat center/cover;
   
7.         box-shadow: 0 0 6px #000;
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         z-index: 1;
    
11.         --state: paused;
    
12. }
    
13. #mydiv::before {
    
14.         position: absolute;
    
15.         content: '';
    
16.         width: 178px;
    
17.         height: 187px;
    
18.         left: calc(50% - 66px);
    
19.         bottom: -20px;
    
20.         border-radius: 50%;
    
21.         cursor: pointer;
    
22.         transform: rotate(-90deg);
    
23.         z-index: 999;
    
24.         background: transparent url('https://files.superbed.cn/store/superbed/e8/61/64a0d24e1ddac507cc24e861.png') no-repeat;
    
25.         animation: swim 2s steps(6) infinite var(--state);
    
26. }
    
27. li-zi {
    
28.         display: block;
    
29.         position: absolute;
    
30.         left: 50%;
    
31.         bottom: 160px;
    
32.         width: 20px;
    
33.         height: 20px;
    
34.         background: snow;
    
35.         border-radius: 50%;
    
36.         animation: move 10s var(--delay) infinite alternate var(--state);
    
37.         --deg: 30deg; --xx: -200px; --delay: 0;
    
38. }
    
39. @keyframes move {
    
40.         from { transform: rotate(0deg) translateY(0px); opacity: 1; }
    
41.         to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
    
42. }
    
43. @keyframes swim{
    
44.         0%{ background-position:0px 0px; }
    
45.         100%{ background-position:0px -1122px; }
    
46. }
    
47. </style>
    
48. 
    
49. <div id="mydiv">
    
50.         <div class="tortoise"></div>
    
51. </div>
    
52. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27937368" autoplay="autoplay" loop="loop"></audio>
    
53. 
    
54. <script>
    
55. (function (){
    
56.         let total = 50;
    
57.         let createLizi = (mum,sons) => {
    
58.                 Array.from({length: sons}).forEach( (s,k) => {
    
59.                         let xx = 6 + Math.ceil(Math.random() * 10);
    
60.                         s = document.createElement('li-zi');
    
61.                         s.style.cssText += `
    
62.                                 width: ${xx}px;
    
63.                                 height: ${xx}px;
    
64.                                 left: calc(50% - ${xx / 2}px);
    
65.                                 --deg: ${50 - Math.ceil(Math.random() * 100)}deg;
    
66.                                 --xx: -${300 + Math.ceil(Math.random() * 600)}px;
    
67.                                 --delay: -${Math.random() * 20}s;
    
68.                         `;
    
69.                         mum.appendChild(s);
    
70.                 });
    
71.         };
    
72.         createLizi(mydiv,total);
    
73.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
74.         aud.addEventListener('play', mState, false);
    
75.         aud.addEventListener('pause', mState, false);
    
76.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
77. })();
    
78. </script>

复制代码

马黑黑

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

红影

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

红影

这个场景很漂亮

马黑黑

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

乌龟赛跑活动结束了

马黑黑

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

水族景象都很迷人

马黑黑

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

下午好

小文

好美的场景！欣赏！

红影

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

赛跑之后就吐泡泡，小乌龟真累。

红影

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

是的，一般都很悠然而且色彩漂亮

马黑黑

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

这是休息的方式

马黑黑

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

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

梦缘

欣赏精彩佳作，谢谢分享，点赞！

马黑黑

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

红影

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

有道理，安排的还挺合理的。

红影

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

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

马黑黑

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

还行，过得去

马黑黑

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

就是