论坛 › 欢乐水吧 › 坠入海底世界（学习黑师乌龟赛跑移动效果）

南无月 发表于 2023-7-2 17:43

本帖最后由 南无月 于 2023-7-2 17:46 编辑 <br /><br /><style>#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('') no-repeat center/cover;
        box-shadow: 0 0 6px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
        --state: paused;
}
#mydiv::before {
      position: absolute;   
      content: '\1F40B';
      left: 81%;
      bottom: 2%;
      transform: rotate(10deg);
      font: bold 80px/80px sans-serif;
      cursor: pointer;
      opacity: .9;
      z-index: 10;
      pointer-events: auto;
      animation: rot 1s infinite alternate linear var(--state);
      
    }
   @keyframes rot { to { transform: rotate(30deg); } }
       #wutai {
    position: absolute;
        width: 100%;
        top:300px;
        height: 247px;
    z-index: 6;
        overflow: hidden;
        position: relative;
}
.wugui {
        margin: 30px 0;
        position: absolute;
        left: 0px;
        width: 178px;
        height: 187px;
        background: url('https://pic.imgdb.cn/item/64a0d24e1ddac507cc24e861.png') no-repeat;
        animation: crawl 2s steps(6) var(--delay) infinite, move 16s var(--delay) infinite linearvar(--state);
        --delay: -8.5s;
}
.wugui:nth-of-type(2) {
        transform: scale(.5);
        --delay: -5.4s;
}
.wugui:nth-of-type(3) {
        transform: scale(.8);
        --delay: -0.1s;
}
   
   
li-zi {
        display: block;
        position: absolute;
        right: 20px;
        bottom: 60px;
        width: 20px;
        height: 20px;
        background: snow;
        border-radius: 50%;
        z-index: 11;
        animation: move1 10s var(--delay) infinite alternate var(--state);
        --deg: -5deg; --xx: -600px; --delay: 0;
}
@keyframes move1 {
        from { transform: rotate(0deg) translateY(0px); opacity: 1; }
        to { transform: rotate(var(--deg)) translateY(var(--xx)); opacity: 0; }
}
@keyframes crawl {
        0% { background-position:0px 0px; }
        100% { background-position:0px -1122px; }
}
@keyframes move {
        to { left: 720px; }
}
    @keyframes rot { to { transform: rotate(30deg); } }
   
    #vid {
        position: absolute;
        width: 1300px;
        height: 100%;
        top:0px;
   left:-100px;
        border-radius: 2%;
        opacity: .95;
        object-fit: cover;
        pointer-events: none;
}   
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;top: 20px;transform: translate(-50%);font: bold 2em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));z-index: 12;}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: CornflowerBlue;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }   
   
   
</style>

<div id="mydiv">
<div id="wutai">
        <div class="wugui"></div>
        <div class="wugui"></div>
        <div class="wugui"></div>
</div>
<div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/35/5b571aaad0ff7.mp4" autoplay="" loop="" muted=""></video>

<div class="tortoise"></div></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1312898651" autoplay="autoplay" loop="loop"></audio><script>(function (){
let mKey = 0, mFlag = true, slip = 0;
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let total = 120;
        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(84% - ${xx / 2}px);
                                --deg: ${30 - Math.ceil(Math.random() * 245)}deg;
                                --xx: -${600 + Math.ceil(Math.random() * 1200)}px;
                                --delay: -${Math.random() * 60}s;
                        `;
                        mum.appendChild(s);
                });
        };
        createLizi(mydiv,total);
        let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');mydiv.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
    aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();</script>

南无月 发表于 2023-7-2 17:44

醉美水芙蓉 发表于 2023-7-2 14:01
月儿聪明！做得漂亮！

谢谢水芙蓉支持{:4_187:}

南无月 发表于 2023-7-2 17:44

红影 发表于 2023-7-2 15:30
这个海底世界真漂亮。还有个只沉船呢。把小乌龟放到这里十分合适。欣赏月儿好帖

{:4_187:}今天作业，谢谢影子支持

南无月 发表于 2023-7-2 17:45

红影 发表于 2023-7-2 15:35
不知道月儿是否加过了，我这里看不到图标

现在显示是有问题的，正在找问题。
https://www.huachaowang.com/forum.php?mod=viewthread&tid=69376&extra=page%3D3&page=2
影子看看这里你看得到不

南无月 发表于 2023-7-2 17:45

小文 发表于 2023-7-2 17:21
动物世界

问好小文，下午好

南无月 发表于 2023-7-2 17:46

马黑黑 发表于 2023-7-2 13:40
你点这个页面的Emoji图标，会进入另一个页面

我点一次复制一次，根本进不到下个页面。。
老师这个贴有问题，第二页发的我可以看到

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

问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_176:}

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

南无月 发表于 2023-7-2 17:45
现在显示是有问题的，正在找问题。
https://www.huachaowang.com/forum.php?mod=viewthread&tid=69376&e ...

应该是我自己电脑的问题。那个里边我也看不到。{:4_173:}

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

南无月 发表于 2023-7-2 17:44
今天作业，谢谢影子支持

月儿每个作业都做的这么认真，太厉害了。{:4_199:}

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

南无月 发表于 2023-7-2 17:46
我点一次复制一次，根本进不到下个页面。。
老师这个贴有问题，第二页发的我可以看到

你点的是复制按钮或链接。它的确有一个进入自己详情的链接。

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

南无月 发表于 2023-7-2 17:43
这是黑山牌的甜茶

优雅而高贵

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

南无月 发表于 2023-7-2 17:42
还有许多讲究。。。后面细看。。

这些问题，很多专业人士也会懵逼

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

南无月 发表于 2023-7-2 17:41
我加了泡泡，一楼显示不正常了。。。
你看看这里，是正常的。
https://www.huachaowang.com/forum.php? ...

找找原因

千羽 发表于 2023-7-2 21:21

排排队的小乌龟和各色漂亮的鱼儿同框，海底世界景色是美美哒{:4_187:}

千羽 发表于 2023-7-2 21:23

那艘沉船残骸是它们的家吧月儿的创意真好，想得周到呢{:4_187:}

南无月 发表于 2023-7-3 08:38

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

感谢梦缘支持鼓励，问好哦{:4_187:}

南无月 发表于 2023-7-3 08:38

红影 发表于 2023-7-2 19:28
应该是我自己电脑的问题。那个里边我也看不到。

好哒，没准儿啥时候就看到了{:4_187:}

南无月 发表于 2023-7-3 08:40

红影 发表于 2023-7-2 19:29
月儿每个作业都做的这么认真，太厉害了。

我也认真灌水了，是个好消息{:4_205:}

南无月 发表于 2023-7-3 08:42

马黑黑 发表于 2023-7-2 19:34
你点的是复制按钮或链接。它的确有一个进入自己详情的链接。

我就即见即点，看到图标点下去没错吧。。
我要这个图标就点这个图标，它就只有复制。。。点几次复制几个。。
另一个详情页面……我等会用力点点看{:4_170:}

南无月 发表于 2023-7-3 08:42

马黑黑 发表于 2023-7-2 19:47
优雅而高贵

真会给自家打广告{:4_170:}

查看完整版本: 坠入海底世界（学习黑师乌龟赛跑移动效果）