朵拉 发表于 2025-7-15 20:31

爱情讯息（学习马黑黑Antonio Mocho效果）

<style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6876468558cb8da5c8b4003f.jpg') no-repeat center/cover; perspective: 800px; box-shadow: 2px 2px 8px #000; z-index: 1; display: grid; place-items: center; position: relative; --size: 120px; --z: 300px; }
    #papa div { display: inherit; place-items: inherit; }
    #btnFs { left: 15px; bottom: 20px; color: white; }
    #box { --bg: #62102e; --border-color: yellow; position: absolute; bottom: 50px; width: var(--size); height: var(--size); transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(30deg) rotateZ(0); }
    #lzpa { position: absolute; bottom: 50px; width: calc(var(--size) - 50px); height: calc(var(--size) - 50px); transition: transform 0.75s; transform-style: preserve-3d; }
    li-zi { position: absolute; width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(35deg, skyblue, green); }
    .front { transform: rotateY(0) translateZ(calc(var(--size) / 2)); }
    .back { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
    .left { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
    .right { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
    .top { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
    .bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
    .board { position: absolute; width: 100%; height: 100%; transition: transform 1s; font: bold 30px sans-serif; text-shadow: 2px 2px 4px orange; color: white; border: 3px dotted var(--border-color); background: var(--bg); opacity: 0.45; cursor: pointer; user-select: none; }
    .ani-fly { animation: fly 20s var(--delay) linear infinite; }
    @keyframes fly {
      from { transform: rotateY(0) translate3d(0, 0, var(--z)); }
      to { transform: rotateY(-360deg) translate3d(0, 0, var(--z)) rotateY(360deg); }
    }
</style>

<div id="papa">
    <audio id="aud" src="https://cccimg.com/view.php/d8e857250d8eea9c5fafdaf7857640a5.mp3" autoplay="" loop=""></audio>
   
    <div id="lzpa"></div>
    <div id="box">
      <div class="board front">LOVE</div>
      <div class="board back"></div>
      <div class="board left"></div>
      <div class="board right"></div>
      <div id="upboard" class="board top"></div>
      <div class="board bottom"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'

    const total = 60;
    const lzAr = [];
    let lzRun = false;
    Array.from({ length: total }).forEach( (lz, k) => {
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            left: ${lzpa.clientWidth * Math.random()}px;
            top: ${lzpa.clientHeight * Math.random()}px;
            background: linear-gradient(
                ${80 - Math.random() * 80}deg,
                #${Math.random().toString(16).substring(2, 8)},
                #${Math.random().toString(16).substring(2, 8)},
                purple
            );
            --delay: ${-k * 20 / total}s;
      `;
      lzAr.push(lz);
      lzpa.appendChild(lz);
    });

    const boards = document.querySelectorAll('.board');

    const setAnimate = (begin = true) => {
      lzAr.forEach(lz => {
            begin ? lz.classList.add('ani-fly') : lz.classList.remove('ani-fly');
      });
    };

    const setYPos = (up = true) => {
      const yy = (papa.clientHeight / 2) * (up ? -1 : 0);
      lzpa.style.transform = `translateY(${yy}px)`;
    }

    const lzInit = () => {
      if (aud.paused) {
            setAnimate(false);
            setTimeout( () => {
                upboard.style.setProperty('transform', `rotateX(90deg) translateZ(calc(var(--size) / 2))`);
                setYPos(false);
            }, 500);
      } else {
            upboard.style.setProperty('transform', `rotateX(180deg) translateZ(300px)`);
            setYPos(true);
            setTimeout( () => {
                setAnimate(true);
            }, 500);
      }
    };

    aud.onplaying = aud.onpause = () => lzInit();

    window.onresize = () => {
      papa.style.setProperty('perspective', 800 * papa.clientWidth/1400 + 'px');
      papa.style.setProperty('--z', 300 * papa.clientWidth/1400 + 'px');
      setYPos(aud.paused ? false : true);
    }

    FS(papa, box);
</script>

朵拉 发表于 2025-7-15 20:32

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2025-7-15 20:50

朵拉 发表于 2025-7-15 20:32
@马黑黑
老师 晚上好，学生交作业，请指正

{:4_199:}

马黑黑 发表于 2025-7-15 20:50

创意不错

红影 发表于 2025-7-15 20:57

漂亮，欣赏朵宝好帖{:4_204:}

梦江南 发表于 2025-7-16 08:56

很有创意，赞！{:4_199:}

杨帆 发表于 2025-7-16 20:47

漂亮，构思新颖，谢谢朵拉精彩分享{:4_187:}
页: [1]
查看完整版本: 爱情讯息（学习马黑黑Antonio Mocho效果）