南无月 发表于 2023-7-2 12:41

坠入海底世界（学习黑师乌龟赛跑移动效果）

本帖最后由 南无月 于 2023-7-3 09:50 编辑 <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(-45deg) 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 12:50

@马黑黑 老师来救个命，这个图标出不来了。。{:4_173:}

南无月 发表于 2023-7-2 12:50

content: '&#128044;';

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

本帖最后由 马黑黑 于 2023-7-2 21:22 编辑 <br /><br />南无月 发表于 2023-7-2 12:50
@马黑黑 老师来救个命，这个图标出不来了。。

<style>
.abc::before { content:'\26BD';}
</style>

<p>测试：伪元素用 Emoji图标<br><br></p>
<div class="abc"></div>

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

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

伪元素在论坛里要正常显示Emoji 文本图标，可参考如下示例：

#mydiv::after {
    content: '\1F40B';
}

其中，\1F40B 是鲸鱼 Emoji 字符的 Unicode 编码，前面需要一个 \ 来引导。

在 Emoji 官网，每一个文本图标都会提供相应的 Unicode 编码，通常表示为如下示例：

U+1F40B

在伪元素中的 content 属性里使用时，U+ 用 \ 代替

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

南无月 发表于 2023-7-2 12:50
content: '&#128044;';

你这是十进制的 Emoji 字符，在 HTML 代码里可以使用，在 CSS 中如何使用，请看楼上我的回复

南无月 发表于 2023-7-2 13:36

马黑黑 发表于 2023-7-2 13:26
伪元素在论坛里要正常显示Emoji 文本图标，可参考如下示例：

#mydiv::after {


图标是在这里找的https://www.emojidaquan.com/都是直接复制过来用的。。。
Unicode 编码，这个编码又不知道从哪里可以看到了。。。

南无月 发表于 2023-7-2 13:37

马黑黑 发表于 2023-7-2 13:29
你这是十进制的 Emoji 字符，在 HTML 代码里可以使用，在 CSS 中如何使用，请看楼上我的回复

就是直接复制出来用的。。。{:4_170:}

南无月 发表于 2023-7-2 13:37

马黑黑 发表于 2023-7-2 13:11
#mydiv::before { content:'\26BD';}




这个可以直接显示，原来也是加了斜杠。。。

南无月 发表于 2023-7-2 13:38

马黑黑 发表于 2023-7-2 13:11
#mydiv::before { content:'\26BD';}




加泡泡的下午再整，烧脑中。。。{:4_173:}

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

南无月 发表于 2023-7-2 13:37
这个可以直接显示，原来也是加了斜杠。。。

要用 Unicode 编码字符，论坛自动转换的是十进制

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

南无月 发表于 2023-7-2 13:38
加泡泡的下午再整，烧脑中。。。

{:4_180:}

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

南无月 发表于 2023-7-2 13:36
图标是在这里找的https://www.emojidaquan.com/都是直接复制过来用的。。。
Unicode 编码，这个编码又不 ...

你点这个页面的Emoji图标，会进入另一个页面

醉美水芙蓉 发表于 2023-7-2 14:01

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

这个海底世界真漂亮。还有个只沉船呢。把小乌龟放到这里十分合适。欣赏月儿好帖{:4_199:}

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

不知道月儿是否加过了，我这里看不到图标{:4_173:}

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

动物世界

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

马黑黑 发表于 2023-7-2 13:11
#mydiv::before { content:'\26BD';}




我加了泡泡，一楼显示不正常了。。。
你看看这里，是正常的。
https://www.huachaowang.com/forum.php?mod=viewthread&tid=69376&extra=page%3D3&page=2

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

马黑黑 发表于 2023-7-2 13:39
要用 Unicode 编码字符，论坛自动转换的是十进制

还有许多讲究。。。后面细看。。

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

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


这是黑山牌的甜茶{:4_170:}
页: [1] 2 3 4 5 6 7
查看完整版本: 坠入海底世界（学习黑师乌龟赛跑移动效果）