亦是金 发表于 2023-12-13 21:08

《新年乐陶陶》 - 张晶晶（克隆红影的《吸星大法》帖）

本帖最后由 亦是金 于 2024-2-9 19:23 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2009048">
<style>
        #papa { margin: auto; width: 1024px; height: 576px; left: -210px; top: 15px;background: #666 url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/bjtp/hyhon.jpg') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
        #player { width: 300px; cursor: pointer; animation: rotating 18s linear infinite var(--state);z-index: 1; }
lz-3d {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: gray;
    transform: perspective(1200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
    animation: o2C var(--du) var(--delay) infinite linear var(--state);
}
@keyframes o2C {
    to { transform: perspective(1200px) rotate(0) translate3d(0,0,0); }
}
        @keyframes rotating { to { transform: rotate(-360deg); } }
#vid {
      position: absolute;
      width: 100%;
      height: 110%;
      top:-50px;   
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 2;
      opacity: .55;
}
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 650px;


      text-align: center;
      font-size: 2.6rem;
      font-weight: bold;
      font-family:华文新魏;
      color: Coral;      
      background: linear-gradient(180deg,hsla(85,100%,85%,.65),hsla(99,100%,43%,.85));
      filter: drop-shadow(2px 2px 6px hsla(45,0%,0%,.95));
      -webkit-background-clip: text;
      transform-origin: top;

      animation: yao 1.2s linear infinite alternate var(--state);
}
@keyframes yao {
      from{transform: perspective(800px) rotatey(10deg); }
      to { transform: perspective(800px) rotatey(-10deg); }
}



</style>

<div id="papa">
   <img src="http://www.bohann.net/static/image/smiley/erhua/013.gif" alt="" style="position: absolute; width: 150px;height: 200px; transform: translate(-400px, 150px);" />

<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4_10s_big.mp4" autoplay="" loop="" muted=""></video>
        <img id="player" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/bjtp/happy 2024c.png" alt="" title="" />
      <div id="baiBox" style="position: absolute; left:200px; top: 20px; ">《新年乐陶陶》 - 张晶晶</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063850759" autoplay loop></audio>
</div>


<script>

(function() {
    let total = 25, ww = papa.offsetWidth, hh = papa.offsetHeight;

    let script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js';
    document.body.appendChild(script);

    Array.from({length: total}).forEach( (item,key) => {
      item = document.createElement('lz-3d');
      item.style.cssText += `
            background: url('https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/105.gif') no-repeat center/cover;
            --xx: ${Math.random() * ww}px;
            --yy: ${Math.random() * hh}px;
            --zz: ${150 + Math.random() * 50}px;
            --deg: ${360 + Math.random() * 360}deg;
            --du: ${20 + Math.random() * 20}s;
            --delay: ${Math.random() * -20}s;
      `;
      papa.appendChild(item);
    });

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

</td></tr></table>

亦是金 发表于 2023-12-13 21:11

@红影我克隆你的的《吸星大法》帖，制作了一个帖子，在此致谢！请你批改指正！{:4_187:}

红影 发表于 2023-12-13 21:22

这个帖子好欢乐啊，欣赏亦是金老师好帖{:4_187:}

红影 发表于 2023-12-13 21:24

亦是金 发表于 2023-12-13 21:11
@红影我克隆你的的《吸星大法》帖，制作了一个帖子，在此致谢！请你批改指正！

哪里，这个帖子亦是金老师有自己的构思，而且马上要新年了，这个贺帖特别吉祥呢{:4_187:}

红影 发表于 2023-12-13 21:25

也祝亦是金老师新年快乐{:4_187:}

亦是金 发表于 2023-12-13 21:46

红影 发表于 2023-12-13 21:22
这个帖子好欢乐啊，欣赏亦是金老师好帖

问好红影！{:4_187:}

亦是金 发表于 2023-12-13 21:49

红影 发表于 2023-12-13 21:24
哪里，这个帖子亦是金老师有自己的构思，而且马上要新年了，这个贺帖特别吉祥呢

我只是按你的帖子的代码做了一个帖，谢谢你的表扬！{:4_187:}

亦是金 发表于 2023-12-13 21:50

红影 发表于 2023-12-13 21:25
也祝亦是金老师新年快乐

也祝你新年快乐！{:4_187:}

红影 发表于 2023-12-13 22:14

亦是金 发表于 2023-12-13 21:46
问好红影！

问好亦是金老师{:4_187:}

红影 发表于 2023-12-13 22:15

亦是金 发表于 2023-12-13 21:49
我只是按你的帖子的代码做了一个帖，谢谢你的表扬！

这个摇摆字就是不同方向的啊，还有动态小人，很可爱{:4_204:}

红影 发表于 2023-12-13 22:15

亦是金 发表于 2023-12-13 21:50
也祝你新年快乐！

谢谢亦是金老师{:4_204:}

侃大山 发表于 2023-12-13 22:23

漂亮{:5_116:}

亦是金 发表于 2023-12-13 22:48

红影 发表于 2023-12-13 22:14
问好亦是金老师

{:4_187:}

亦是金 发表于 2023-12-13 22:49

红影 发表于 2023-12-13 22:15
这个摇摆字就是不同方向的啊，还有动态小人，很可爱

你观察的真仔细！{:4_189:}

亦是金 发表于 2023-12-13 22:49

红影 发表于 2023-12-13 22:15
谢谢亦是金老师

{:4_187:}

亦是金 发表于 2023-12-13 22:50

侃大山 发表于 2023-12-13 22:23
漂亮

问好！谢谢欣赏！{:4_190:}

小文 发表于 2023-12-14 07:10

都是高手，点赞！{:4_187:}

幸运草 发表于 2023-12-14 09:11

介么早就贺新年啦，那不是要贺很多天啦{:6_231:}

红影 发表于 2023-12-14 09:20

亦是金 发表于 2023-12-13 22:49
你观察的真仔细！

亦是金老师的作品当然要仔细研究了{:4_173:}

红影 发表于 2023-12-14 09:20

亦是金 发表于 2023-12-13 22:48


问好亦是金老师，早上好{:4_187:}
页: [1] 2
查看完整版本: 《新年乐陶陶》 - 张晶晶（克隆红影的《吸星大法》帖）