红影 发表于 2023-12-12 23:21

《吸星大法》学习黑黑太阳花效果

<style>
        #papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: #666 url('https://pic.imgdb.cn/item/6576f520c458853aef6fd20b.jpg') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
        #player { width: 400px; 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: 60px;
    height: 60px;
    border-radius: 50%;
    background: gray;
    transform: perspective(200px) 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(200px) 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: .85;
}
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 380px;
      text-align: center;
      font-size: 3.6rem;
      font-weight: bold;
      font-family:cursive;
      color: transparent;      
      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) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
</style>

<div id="papa">
<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://huachaowang.com/shangc/2022/sunfl-2.svg" alt="" title="" />
      <div id="baiBox" style="position: absolute; left:10px; top: 10px; ">吸星大法</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2088768183" autoplay loop></audio>
</div>

<script>

(function() {
    let total = 100, 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://z1.ax1x.com/2023/12/12/piWbGIs.png') 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>

红影 发表于 2023-12-12 23:23

找到了这个音乐，就把《逃脱引力》帖子里的粒子换成了向内，用图片代替了原来的粒子{:4_173:}

红影 发表于 2023-12-12 23:26

主要去试试上传svg图片，听从黑黑的建议，试了试，总算可以了，谢谢@马黑黑的代码{:4_187:}

红影 发表于 2023-12-12 23:27

好久没用过摆动字了，也用一下，并学着让摆动字也能暂停。

朵拉 发表于 2023-12-12 23:50

哇，漂亮的，强烈欣赏~~{:4_204:}

幸运草 发表于 2023-12-13 08:41

星星都跑你家了吖，怪不得晚上都看不到了{:6_242:}

梦油 发表于 2023-12-13 09:23

好一个转动着的大轮子，真好看！

红影 发表于 2023-12-13 09:30

朵拉 发表于 2023-12-12 23:50
哇，漂亮的，强烈欣赏~~

多谢朵宝鼓励{:4_187:}

红影 发表于 2023-12-13 09:31

幸运草 发表于 2023-12-13 08:41
星星都跑你家了吖，怪不得晚上都看不到了

跑帖子里了，没跑我家{:4_189:}

红影 发表于 2023-12-13 09:31

梦油 发表于 2023-12-13 09:23
好一个转动着的大法论，真好看！

谢谢梦油，主要是学习一下太阳花的制作{:4_173:}

幸运草 发表于 2023-12-13 09:38

红影 发表于 2023-12-13 09:31
跑帖子里了，没跑我家

赶紧放出来吖，没有星星的夜晚，多么寂寞{:6_231:}

亦是金 发表于 2023-12-13 10:04

本帖最后由 亦是金 于 2023-12-13 10:07 编辑

红影大侠出品，必是佳品！欣赏学习收藏了！{:4_187:}

红影 发表于 2023-12-13 11:10

幸运草 发表于 2023-12-13 09:38
赶紧放出来吖，没有星星的夜晚，多么寂寞

放出来只要换往外飞的代码就行，这两种代码黑黑都有的{:4_173:}

红影 发表于 2023-12-13 11:10

亦是金 发表于 2023-12-13 10:04
红影大侠出品，必是佳品！欣赏学习收藏了！

哪里，我也是套用黑黑代码呢，感谢亦是金老师鼓励{:4_187:}

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

我准备克隆一个玩玩！{:4_189:}

马黑黑 发表于 2023-12-13 12:55

红影 发表于 2023-12-12 23:26
主要去试试上传svg图片，听从黑黑的建议，试了试，总算可以了，谢谢@马黑黑的代码

完全可以的

马黑黑 发表于 2023-12-13 12:56

这是真正的黑洞{:4_198:}

小文 发表于 2023-12-13 13:02

厉害了，恩师！很赞！{:4_180:}{:4_187:}

世外桃源 发表于 2023-12-13 13:26

梦幻的感觉，螺旋效果有点酷，科技感很强{:4_199:}

世外桃源 发表于 2023-12-13 13:27

文字还会摇摆{:4_199:}
页: [1] 2 3
查看完整版本: 《吸星大法》学习黑黑太阳花效果