杨帆 发表于 2025-8-5 20:36

《我心所愿》- 祝福老师@马黑黑，@起个网名好难，@亚伦影音工作室

<style>
       @import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
    #pa { --offsetX: 81px; background: url('https://pic1.imgdb.cn/item/68909e4758cb8da5c80454da.jpg'); background-size: cover; background-blend-mode: hard-light; --state: running;user-select: none;background-blend-mode: darken; }
    #pa::before { position: absolute; content: ''; background: linear-gradient(red 0%, yellow 50%, blue 100%) no-repeat center/cover;left: 5%; top: 40%; width: 25%; height: 45%; opacity: var(--opacity); -webkit-mask: url('https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png') no-repeat center/cover; mask: url('https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png') no-repeat center/cover; }
    .clover { position: absolute; top: -100px; width: 100px; height: 100px; outline: 0; border: 0; background: green; opacity: 0.7; animation: up 20s var(--delay) infinite linear var(--state);opacity: var(--opacity); }
    @keyframes up { to { transform: rotate(var(--deg)) translateY(1200px) rotate(2turn); } }
    #cat { position: absolute; right: 2%; bottom: 5%; width: 120px; transition: 0.45s; transform: scale(var(--scale));z-index: 10; }
    #head { width: 100px; height: 92.5px; background-color: #171717; border-radius: 50%; margin: auto; }
    #ears { height: 16.25px; position: relative; left: 8.75px; animation: an-ears 1s infinite alternate-reverse; }
    .ear { width: 0; height: 0; border-left: 22.5px solid transparent; border-right: 22.5px solid transparent; border-bottom: 40px solid #171717; font-size: 0; line-height: 0; float: left; margin-right: 15px; transform: rotate(35deg); }
    .ear:first-child { transform: rotate(-35deg); }
    #eyes { clear: both; width: 87.5px; position: relative; top: 6.25px; left: 13.25px; }
    .eye { width: 30px; height: 30px; background-color: #FFFFFF; border-radius: 50%; float: left; }
    .eye:first-child { margin-right: 12.5px; }
    .pupil { position: relative; top: 10px; background-color: #000000; border-radius: 50%; width: 20px; height: 20px; animation: an-pupils 1s infinite alternate-reverse; }
    .pupil_ref { background-color: #FFFFFF; border-radius: 45%; width: 7.5px; height: 7.5px; position: relative; top: 10px; left: 2.5px; }
    #nose { width: 11.25px; height: 7.5px; border-radius: 50%; background-color: #FFFFFF; position: relative; top: 40px; left: 42.5px; }
    #baffi_sx { position: relative; left: -25px; top: 21.25px; transform: rotate(10deg); }
    #baffi_dx { position: relative; left: 55.75px; top: 24px; transform: rotate(-10deg); }
    .baffo { width: 65px; height: 1.25px; border: solid 0.75px #000; border-color: #000 transparent transparent transparent; border-radius: 60%/7.5px 7.5px 0 0; }
    #btnFs { font: 18px 'Microsoft YaHei', sans-serif; color: #fff; left: 20px; top: 20px; }
    .title-text { font: bold 50px STLiti, sans-serif; color: #eee; text-shadow: 0 0 1px #000, 2px 2px 6px #333; position: absolute; }
    .ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
    @keyframes hue-rotate { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } }
    @keyframes an-pupils { from { left: 15px; } to { left: 0px; } }
    @keyframes an-ears { from { top: 0; } to { top: 6.25px; } }
    @keyframes flash { to { color: Lime; opacity:.9; } }
    .lrc { position: absolute; top: 40%; left: -2%; z-index: 1; width: 540px; height: 350px; overflow: hidden; }
    .lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
    .lrc #ul li { color: #fff; font: bold 2em/2.8 STZhongsong; transition: 0.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: #00BFFF; font-weight: 600; text-align: center; }
    #flying{position: absolute;right: 0px; top: -12%;width:40%;height: auto;z-index: 3; filter: drop-shadow(-50px 450px 0 rgba(119,136,153,.35)); animation: fly 28s linear infinite var(--state); }
    #flying:hover {
animation-play-state: paused;
}
    @keyframes fly {
      0% {
            transform: translate(calc(100% + 50px), 0);
            opacity: 1;         
      }
      45% {
            transform: translate(calc(-100vw - 50px), 100px);
            opacity: 0.9;
      }
      46% {
            transform: translate(calc(-100vw - 50px), 100px);
            opacity: 0;
      }
      47% {
            transform: translate(calc(100% + 50px), 100px);
            opacity: 0;
      }
      48% {
            transform: translate(calc(100% + 50px), 100px);
            opacity: 0.9;
      }
      100% {
            transform: translate(calc(-100vw - 50px), 0);
            opacity: 1;
      }
    }
#vid1 { position: absolute; right:2%; bottom: 4%; width: 45%; height:15%; object-fit: cover; pointer-events: none; opacity: .9;mix-blend-mode: screen;z-index: 1; }
#vid2 { position: absolute; top:-10%; left: 0; width: 100%; height:100%; object-fit: cover; pointer-events: none; opacity:.8; mask:linear-gradient(to bottom,red 0%,transparent 40%,transparent);-webkit-mask:linear-gradient(to bottom,red 0%,transparent 40%,transparent); z-index: 1; }
#processMeter {position: absolute; left:13%; bottom:37%; width: 120px; height:60px;z-index:1;opacity: var(--opacity);}
</style>
<div id="pa">
    <div id="processMeter">
                <svg viewBox="0 0 200 100" id="svgObj">
                        <g stroke-width='8'>
                  <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="Lime"fill="none" ></path>
                        <path
                        id="fgc"
                        d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                        stroke="darkred"
                        fill="none"
                        stroke-dasharray="455"
                        stroke-dashoffset="455"
                        ></path>
                        </g>
                        <defs>
                  <clipPath id="clip">
                            <circle cx="100" cy="50" r="36" />
                  </clilpPath>
            </defs>
                        <image xlink:href="https://pic.imgdb.cn/item/66324e000ea9cb1403a64408.webp " width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <g text-anchor="middle" dominant-baseline="middle" fill='black' style="font:bold 16px;">
                        <text x="82%" y="50%" id="durTime"> </text>
                        <text x="18%" y="50%" id="curTime"> </text>
                        </g>
                </svg>      
      </div>
    <audio id="aud" src="https://upfile.mp3.wf/view.php/519c16c5a51082bcbabe0f0e9ee4cfff.mp3" autoplay loop></audio>
    <video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8f4ab37a1.mp4" autoplay loop muted></video>
    <video id="vid2" src="https://img.tukuppt.com/video_show/2418175/00/01/72/5b49440ab4e45.mp4" autoplay loop muted></video>         
    <div class="lrc">
            <ul id="ul"></ul>
      </div>
    <img id="flying" src="https://cccimg.com/view.php/d88a161b163e29afa1dd2a18a203fba2.gif" alt="" />
    <div id="cat">
      <div id="ears">
            <div class="ear"></div>
            <div class="ear"></div>
      </div>
      <div id="head">
            <div id="eyes">
                <div class="eye">
                  <div class="pupil">
                        <div class="pupil_ref"></div>
                  </div>
                </div>
                <div class="eye">
                  <div class="pupil">
                        <div class="pupil_ref"></div>
                  </div>
                </div>
            </div>
            <div id="nose"></div>
            <div id="baffi_dx">
                <div class="baffo"></div>
                <div class="baffo"></div>
                <div class="baffo"></div>
            </div>
            <div id="baffi_sx">
                <div class="baffo"></div>
                <div class="baffo"></div>
                <div class="baffo"></div>
            </div>
      </div>
    </div>
</div>
<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa,cat);

    const txtAr = '我心所愿'.split('');
    let spans = [];
    txtAr.forEach( (t,k) => {
      const s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text rotate' : 'title-text';
      s.style.cssText += `right: 50px; top: ${k * 80 + 50}px;`;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('ani');
            spans[(k + 1) % txtAr.length].classList.add('ani');   

            s.classList.remove('rotate');
            spans[(k+1) % txtAr.length].classList.add('rotate');
      };
      pa.appendChild(s);
    });

cat.onmousemove = () => {
                cat.title = document ? '播放/暂停' : '';
                cat.style.cursor = document ? 'pointer' : 'default';

        }
aud.ontimeupdate = () => cat.style.setProperty('--scale', Math.random() * 0.5 + 1);
aud.onplaying = aud.onpause = () => pa.style.setProperty('--opacity', aud.paused ? 0 : 1);
</script>   
    <script>
      const aud = document.getElementById('aud');
      const pa = document.getElementById('pa');
      const cat = document.getElementById('cat');
      const ears = document.getElementById('ears');
      const pupils = document.querySelectorAll('.pupil');
      const processMeter = document.getElementById('processMeter');   
      const clover = document.querySelectorAll('.clover');
      const flying = document.getElementById('flying');

      cat.onclick = () => {
            aud.paused ? aud.play() : aud.pause();               
            processMeter.style.setProperty('--opacity', aud.paused ? 0 : 1);
            clover.style.setProperty('--opacity', aud.paused ? 0 : 1);
            flying.style.display = flying.style.display === 'none' ? 'block' : 'none';

      };

      function syncAnimationState() {
            const isPaused = aud.paused;
            const playState = isPaused ? 'paused' : 'running';

            pa.style.animationPlayState = playState;
            ears.style.animationPlayState = playState;

            pupils.forEach(pupil => {
                pupil.style.animationPlayState = playState;
            });
      }
      aud.addEventListener('play', syncAnimationState);
      aud.addEventListener('pause', syncAnimationState);
      syncAnimationState();

      let lrc = `

我心所愿
作词：马健南
作曲：马健南
编曲：马健涛
录音：马健涛
混音：马健涛
母带：马健涛
发行：曲风文化
感谢生命中有你
有你人生更有意义
也许这都是天意
感恩在我的歌声里
多少快乐的回忆
是你温暖这份情意
在未来的日子里
我把祝福送给你
愿你笑容像花儿美丽
愿你生活都充满惊喜
愿您凡事都一切如意
愿你余生都晴空万里
愿你好运似浪潮不息
愿你爱人白首不相离
愿你身体永青春活力
愿你永远有福报相依
感谢生命中有你
有你人生更有意义
也许这都是天意
感恩在我的歌声里
多少快乐的回忆
是你温暖这份情意
在未来的日子里
我把祝福送给你
愿你笑容像花儿美丽
愿你生活都充满惊喜
愿您凡事都一切如意
愿你余生都晴空万里
愿你好运似浪潮不息
愿你爱人白首不相离
愿你身体永青春活力
愿你永远有福报相依

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            ul = document.querySelector("#ul"),
            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;
      });      
      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 (ul.children) {
                ul.children.classList.add('active');
            }
      }

      let rafId;
      audio.addEventListener("timeupdate", () => {
            cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(setOffset);
      });

(function() {
Array.from({ length: 36 }).forEach(() => {
    let ww = 50 + Math.floor(Math.random() * 50);
    let ar = ;
    let item = document.createElement('span');
    item.className = 'clover';
    item.style.cssText += `
      --deg: ${80 - Math.random() * 140}deg;
      --delay: ${Math.random() * 10 - 20}s;
      width: ${ww}px;
      height: ${ww}px;
      left: ${30 + Math.random() * 40}%;
    `;
    pa.appendChild(item);
    item.style.clipPath = mkClover(item, ar);
});

function mkClover(ele, num) {
    let r = ele.offsetWidth / 2, pathAr = [];
    for (let i = 0; i < 200; i++) {
      let angle = i * 2 * Math.PI / 200;
      let x = r - r * Math.sin(num * angle) * Math.cos(angle);
      let y = r - r * Math.sin(num * angle) * Math.sin(angle);
      pathAr.push(x + 'px ' + y + 'px');
    }
    return 'polygon(' + pathAr.join(', ') + ')';
}
})();

</script>


梦油 发表于 2025-8-5 21:08

欣赏美曲，问候杨帆。

红影 发表于 2025-8-5 23:35

帖子里集中了这么多效果，太厉害了{:4_199:}

红影 发表于 2025-8-5 23:36

欣赏杨帆好帖，祝三位大咖收礼开心{:4_187:}{:4_187:}{:4_187:}

杨帆 发表于 2025-8-5 23:42

梦油 发表于 2025-8-5 21:08
欣赏美曲，问候杨帆。

谢谢梦油超版鼓励，祝开心{:4_190:}

杨帆 发表于 2025-8-5 23:46

红影 发表于 2025-8-5 23:36
欣赏杨帆好帖，祝三位大咖收礼开心

谢谢影子鼓励~

用老师的代码做成帖子交作业

以表对三位大咖的敬意与谢意{:4_191:}

梦江南 发表于 2025-8-6 07:49

好漂亮的画面，好听的歌曲，杨帆用真诚精彩的帖子表示对三位老师的感恩。

向您学习！为您点赞！{:4_187:}

梦江南 发表于 2025-8-6 07:50

杨帆是这里的超级好学生！{:4_171:}

梦江南 发表于 2025-8-6 07:52

原来黑猫头是暂停按钮。{:4_199:}

梦油 发表于 2025-8-6 10:39

杨帆 发表于 2025-8-5 23:42
谢谢梦油超版鼓励，祝开心

杨帆朋友不客气。

老谟深虑 发表于 2025-8-6 12:34

            欣赏老师的佳作，祝三位老师幸福安康！

红影 发表于 2025-8-6 15:35

杨帆 发表于 2025-8-5 23:46
谢谢影子鼓励~

用老师的代码做成帖子交作业


杨帆有心人，这样的礼物很暖心{:4_187:}

杨帆 发表于 2025-8-6 17:56

梦江南 发表于 2025-8-6 07:49
好漂亮的画面，好听的歌曲，杨帆用真诚精彩的帖子表示对三位老师的感恩。

向您学习！为您点赞！{:4_187: ...

问好江南，谢谢鼓励~

感恩老师，好好学习，开心生活{:4_187:}

杨帆 发表于 2025-8-6 17:57

红影 发表于 2025-8-6 15:35
杨帆有心人，这样的礼物很暖心

谢谢影子鼓励，感恩老师，愉快学习{:4_204:}

杨帆 发表于 2025-8-6 17:59

老谟深虑 发表于 2025-8-6 12:34
欣赏老师的佳作，祝三位老师幸福安康！

问好老谟深虑朋友，谢谢鼓励，感恩老师，天天学习{:4_190:}

红影 发表于 2025-8-6 21:29

杨帆 发表于 2025-8-6 17:57
谢谢影子鼓励，感恩老师，愉快学习

嗯嗯，一起感恩老师们{:4_187:}
页: [1]
查看完整版本: 《我心所愿》- 祝福老师@马黑黑，@起个网名好难，@亚伦影音工作室