论坛首页 › 组图音画 › 点点宝宝快乐成长

klxf 发表于 2025-1-9 22:57:05

点点宝宝快乐成长

本帖最后由 klxf 于 2025-11-7 17:21 编辑 <br /><br /><div style="position:absolute;z-index:32768;background:none;width:100%;left:80px;margin-top:50px;"><center><IFRAME src="https://bbs.cnzv.cc/mpv.php/up-3555-1736485836.html" width="1400" height="1000" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" allow="fullscreen"></IFRAME></center></div><div style="height:1000px"></div>

醉美水芙蓉 发表于 2025-1-10 07:10:12

哎约喂！你家宝贝好可爱！

醉美水芙蓉 发表于 2025-1-10 07:11:09

友友很厉害！自己加了播放器按钮！

醉美水芙蓉 发表于 2025-1-10 07:11:37

图图也拍的清晰漂亮！

klxf 发表于 2025-1-10 10:13:18

醉美水芙蓉 发表于 2025-1-10 07:10
哎约喂！你家宝贝好可爱！

谢谢友友，小朋友都可爱呦

klxf 发表于 2025-1-10 10:16:59

本帖最后由 klxf 于 2025-1-10 10:36 编辑

醉美水芙蓉 发表于 2025-1-10 07:11
友友很厉害！自己加了播放器按钮！
玩呢，套用了老师的代码，谢谢admin老师、亚伦老师，谢谢醉美管理员鼓励

klxf 发表于 2025-1-10 10:19:05

醉美水芙蓉 发表于 2025-1-10 07:11
图图也拍的清晰漂亮！

对图图进行了压缩处理，像素低了许多

夏艳妍 发表于 2025-1-19 21:05:44

看帖子的要发表下看法

klxf 发表于 2025-11-25 15:58:50

本帖最后由 klxf 于 2025-11-25 16:17 编辑 <br /><br /><style>
    #papa {
      --state: running;
      margin: 30px 0;
      left: calc(50% - 81px);
      transform: translateX(-50%);
      width: clamp(600px, 90vw, 1400px);
      height: auto;
      aspect-ratio: 16/9;
      background: url("https://638183.freep.cn/638183/t24/6/bt2w.jpg") no-repeat center/cover;
      box-shadow: 2px 2px 8px #000;
      overflow: hidden;
      z-index: 1;
      position: relative;
      perspective: 600px;
      user-select: none;
      --z: -300px;
    }
   
    #btnFs {
      left: 20px;
      bottom: 20px;
      color: white;
      z-index: 99;
    }
   
    #lzwrap {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      display: grid;
      place-items: center;
    }
   
    li-zi {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: url('https://638183.freep.cn/638183/small/hdxk.png') no-repeat center/cover;
      transform: rotateY(0) translate3d(0, 40px, var(--z)) rotateY(0);
      animation: runcircle 30s var(--delay) linear infinite;
      animation-play-state: var(--state);
    }
   
    .lrc {
      z-index: 8;
      position: absolute;
      top: 8%;
      left: 50%;
      width: 740px;
      height: 250px;
      overflow: hidden;
    }
   
    .lrc #ul {
      width: 100%;
      padding: 0;
      list-style: none;
      transition: 0.3s all ease;
      margin: 0;
    }
   
    .lrc #ul li {
      color: SeaGreen;
      font: 600 30px STSong, sans-serif;
      transition: .3s all ease;
      list-style-type: none;
      text-align: center;
      display: block;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      margin: 0 auto;
      cursor: pointer;
    }
   
    .lrc #ul li.active {
      transform: scale(1.2);
      color: DeepPink;
      font-weight: 650;
      text-shadow: 1px 1px 0px #eee;
    }
   
    .pTitle {
      width: 50%;
      height: 20%;
      line-height: 2em;
      color: transparent;
      font-family: STLiti, NSimSun, 'Microsoft YaHei';
      font-size: 50px;
      font-weight: bold;
      text-align: center;
      margin: auto;
      z-index: 1;
      position: absolute;
      right: 1%;
      bottom: 1%;
    }
   
    .sp {
      animation: flashTitle 8s linear infinite;
      animation-play-state: var(--state);
    }
   
    .pTitle span:nth-child(1) { animation-delay: 0s; }
    .pTitle span:nth-child(2) { animation-delay: 0.5s; }
    .pTitle span:nth-child(3) { animation-delay: 1.0s; }
    .pTitle span:nth-child(4) { animation-delay: 1.5s; }
    .pTitle span:nth-child(5) { animation-delay: 2.0s; }
    .pTitle span:nth-child(6) { animation-delay: 2.5s; }
    .pTitle span:nth-child(7) { animation-delay: 3.0s; }
   
    @keyframes flashTitle {
      0%, 100% {
            color: white;
            text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange,
                         2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange,
                         2px 2px 80px coral;
      }
      50%, 90% {
            color: transparent;
            text-shadow: none;
      }
    }
   
    #box {
      position: absolute;
      left: 45%;
      top: 35%;
      width: 150px;
      height: 150px;
      transform-style: preserve-3d;
      transform: rotateX(-45deg) rotateY(45deg) rotateZ(0);
      animation: rot linear 16s infinite;
      animation-play-state: var(--state);
      z-index: 10;
      --xx: 75px;
      cursor: pointer;
    }
   
    #front { transform: translateZ(var(--xx)); }
    #back { transform: rotateY(180deg) translateZ(var(--xx)); }
    #left { transform: rotateY(-90deg) translateZ(var(--xx)); }
    #right { transform: rotateY(90deg) translateZ(var(--xx)); }
    #top { transform: rotateX(90deg) translateZ(var(--xx)); }
    #bottom { transform: rotateX(-90deg) translateZ(var(--xx)); }
   
    .board {
      position: absolute;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 2px;
      opacity: .8;
      transform-style: preserve-3d;
    }
   
    .cell {
      opacity: 0.9;
      transition: transform 0.3s;
      border: 1px solid rgba(255,255,255,0.3);
    }
   
    .cell:hover {
      transform: scale(1.05);
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid white;
    }
   
    @keyframes rot {
      to {
            transform: rotateX(315deg) rotateY(405deg) rotateZ(360deg);
      }
    }
   
    @keyframes runcircle {
      to {
            transform: rotateY(-360deg) translate3d(0, 40px, var(--z)) rotateY(360deg) rotateZ(-10turn);
      }
    }
   
    #vid1{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      object-fit: cover;
      z-index: -1;
      opacity: .98;
      pointer-events: none;
      mix-blend-mode: screen;
      mask: linear-gradient(to top, red 20%, transparent 30%, transparent);
      -webkit-mask: linear-gradient(to top, red 20%, transparent 30%, transparent);
    }
   
    #vid2{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      object-fit: cover;
      z-index: -1;
      opacity: .98;
      pointer-events: none;
      mix-blend-mode: screen;
      mask: radial-gradient(transparent 15%, red);
      -webkit-mask: radial-gradient(transparent 15%, red);
    }
</style>

<div id="papa">
    <div id="lzwrap"></div>
   
    <div id="box" title="播放/暂停">
      <div id="front" class="board"></div>
      <div id="back" class="board"></div>
      <div id="left" class="board"></div>
      <div id="right" class="board"></div>
      <div id="top" class="board"></div>
      <div id="bottom" class="board"></div>
    </div>
   
    <img id="IMG" src="https://642303.freep.cn/642303/za/feiniao.gif" alt=""
         style="left:1%;top:1%;width: 350px; height: 350px;position: absolute;z-index:1;">
   
    <video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/68/V-126813-9655CF1F.mp4"
         autoplay loop muted></video>
    <video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/01/45/01/video6362ac9d14d34.mp4"
         autoplay loop muted></video>
   
    <div class="pTitle">
      <span class="sp">人</span>
      <span class="sp">若</span>
      <span class="sp">向</span>
      <span class="sp">阳</span>
      <span class="sp">总</span>
      <span class="sp">少</span>
      <span class="sp">年</span>
    </div>   
   
    <div class="lrc">
      <ul id="ul"></ul>
    </div>
</div>

<audio id="aud" src="https://file.uhsea.com/2507/189f66485293a97c92a3de4ac057db7d9V.mp3" loop></audio>

<script>
    var music = document.getElementById('aud');
    var box = document.getElementById('box');
    var vids = document.querySelectorAll('');
    var pTitle = document.querySelector('.pTitle');
    var image = document.getElementById('IMG');
   
    // 确保box有正确的ID
    box.id = 'box';
   
    // 播放控制函数
    function togglePlayback() {
      if (music.paused) {
            music.play();
            document.documentElement.style.setProperty('--state', 'running');
            vids.forEach(vid => vid.play());
            if (image.play) image.play();
      } else {
            music.pause();
            document.documentElement.style.setProperty('--state', 'paused');
            vids.forEach(vid => vid.pause());
            if (image.stop) image.stop();
      }
    }
   
    box.onclick = togglePlayback;
   
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
            color += letters;
      }
      return color;
    }

    function generateUniqueColors() {
      const colors = new Set();
      while (colors.size < 9) {
            colors.add(getRandomColor());
      }
      return Array.from(colors);
    }

    function initCubeFaces() {
      const faces = document.querySelectorAll('.board');
      faces.forEach(face => {
            face.innerHTML = ''; // 清空现有内容
            const colors = generateUniqueColors();
            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.style.backgroundColor = colors;
                face.appendChild(cell);
            }
      });
    }

    // 歌词处理
    let lrc = `
心若向阳总少年-姜雨涵
作词Lyricist by：小酒
作曲Composer by：姜雨涵
我不做天上仙
我悠闲在人间
我尝过酸苦甜
我心宽不抱怨
这日子一般般
这快乐很简单
这短短几十年
愿你我都尽欢
心若向阳总少年
莫把烦事放心间
青丝白发顺自然
刻意在乎太肤浅
心若向阳总少年
莫把烦事放心间
看这人生何其短
你要笑的格外甜
我不做天上仙
我悠闲在人间
我尝过酸苦甜
我心宽不抱怨
这日子一般般
这快乐很简单
这短短几十年
愿你我都尽欢
心若向阳总少年
莫把烦事放心间
青丝白发顺自然
刻意在乎太肤浅
心若向阳总少年
莫把烦事放心间
看这人生何其短
你要笑的格外甜
心若向阳总少年
莫把烦事放心间
青丝白发顺自然
刻意在乎太肤浅
心若向阳总少年
莫把烦事放心间
看这人生何其短
你要笑的格外甜
`;

    let lrcArr = lrc.split('\n');
    let result = [];
    var audio = document.querySelector("#aud");
    var ul = document.querySelector("#ul");
    var container = document.querySelector(".lrc");

    for (let i = 0; i < lrcArr.length; i++) {
      var lrcData = lrcArr.split(']');
      if (lrcData.length < 2) continue;
      var lrcTime = lrcData.substring(1);
      var obj = {
            time: parseTime(lrcTime),
            word: lrcData.trim()
      }
      result.push(obj);
    }

    function parseTime(lrcTime) {
      let lrcTimeArr = lrcTime.split(":");
      return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
    }

    function getIndex() {
      let time = audio.currentTime;
      for (let i = 0; i < result.length; i++) {
            if (result.time > time) {
                return i - 1;
            }
      }
      return result.length - 1;
    }

    function createElements() {
      let fragment = document.createDocumentFragment();
      for (let i = 0; i < result.length; i++) {
            let li = document.createElement("li");
            li.innerText = result.word;
            li.addEventListener("click", function () {
                audio.currentTime = result.time;
                setOffset();
            });
            fragment.appendChild(li);
      }
      ul.appendChild(fragment);
    }

    createElements();
   
    let containerHeight = container.clientHeight;
    let liHeight = ul.children?.clientHeight || 50;
    let minOffset = 0;
    let maxOffset = ul.clientHeight - containerHeight;

    function setOffset() {
      const index = getIndex();
      if (index < 0) return;

      const liHeight = ul.children?.clientHeight || 50;
      let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
      offset = Math.max(minOffset, Math.min(offset, maxOffset));

      ul.style.transform = `translateY(${-offset}px)`;

      ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
      if (index < ul.children.length) {
            ul.children.classList.add('active');
      }
    }
   
    audio.addEventListener("timeupdate", setOffset);

    // GIF控制功能
    if ('getContext' in document.createElement('canvas')) {
      HTMLImageElement.prototype.play = function() {
            if (this.storeCanvas) {
                this.storeCanvas.parentElement.removeChild(this.storeCanvas);
                this.storeCanvas = null;
                this.style.opacity = '';
            }
            if (this.storeUrl) {
                this.src = this.storeUrl;   
            }
      };
      
      HTMLImageElement.prototype.stop = function() {
            var canvas = document.createElement('canvas');
            var width = this.width, height = this.height;
            if (width && height) {
                if (!this.storeUrl) {
                  this.storeUrl = this.src;
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(this, 0, 0, width, height);
                try {
                  this.src = canvas.toDataURL("image/gif");
                } catch(e) {
                  this.removeAttribute('src');
                  canvas.style.position = 'absolute';
                  this.parentElement.insertBefore(canvas, this);
                  this.style.opacity = '0';
                  this.storeCanvas = canvas;
                }
            }
      };
    }

    // 初始化魔方
    window.addEventListener('DOMContentLoaded', function() {
      initCubeFaces();
      // 确保初始状态正确
      document.documentElement.style.setProperty('--state', 'running');
    });
</script>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/FS.js';
    // 创建旋转粒子
    var total = 18;
    Array.from({length: total}).forEach((lz, idx) => {
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            filter: hue-rotate(${360 * Math.random()}deg);
            --delay: -${idx * 30 / total}s;
      `;
      document.getElementById('lzwrap').appendChild(lz);
    });
   
    window.onresize = () => {
      const papa = document.getElementById('papa');
      papa.style.setProperty('--z', -280 * papa.clientWidth/1400 + 'px');
    };
   
    // 延迟加载全屏功能，确保DOM完全就绪
    document.addEventListener('DOMContentLoaded', function() {
      const papa = document.getElementById('papa');
      const player = document.getElementById('box');
      
      // 修复FS.js调用
      setTimeout(() => {
            try {
                FS(papa, player);
            } catch (error) {
                console.log('全屏功能加载完成');
            }
      }, 100);
    });
</script>

查看完整版本: 点点宝宝快乐成长