醉美水芙蓉 发表于 2025-10-13 22:30:18

夏天里等下雪冬天里等花开

<meta charset="utf-8">
<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';   
    #pa { --bg: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/b645f0a9d8de1000256f3a9f6062cb82.jpg') no-repeat center/cover;}
    #vid { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;mask: radial-gradient(transparent 5%, red); -webkit-mask: radial-gradient(transparent 5%, red); opacity: .8; object-fit: cover; overflow: hidden; z-index: 1;mix-blend-mode: overlay; transition:.5s;}
    #vid1 {position: absolute; width: 437px;height: 270px;right: 2%;top: 8%;object-fit: cover;         border: 3px solid #ccc;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;border-radius: 50%;mix-blend-mode: unset;pointer-events: none;opacity: .85;z-index: 1;}
    #progress { position: absolute; width: 10vw; height: 10vw; right:9%; bottom: 9%; transition:.4s;cursor: pointer;z-index: 5; }
    #progress:hover{transform:scale(1.1,1.1);filter: brightness(3) drop-shadow(3px 2px 35px Azure);}
    #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer;animation: rotate 8s linear infinite var(--state); }
    #g1:hover {animation-play-state: paused; }
    #btnFs { left: 20px; top: 20px; color: gold; border-color: currentColor !important;z-index: 5; }
    #dt { position: absolute; left: 12%; top: 50%; z-index: 5; mix-blend-mode: multiply;visibility: var(--visibility); }
   
    #mwrap { position: absolute;perspective: 800px; transform-style: preserve-3d; right:13%;bottom: 15%;width: 200px;height: 200px;--state: running;}   
    .title-text {font: bold 30px 'Microsoft YaHei', sans-serif;color: #eee;text-shadow: 0 0 1px #000, 2px 2px 6px #333;position: absolute;color: SeaShell;user-select: none;transform-origin: center;    }
    .title-text:hover { background: hsla(210, 100%, 60%, .25);box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);animation-play-state: paused;}
    .ani {animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state);}
    @keyframes flash {to { color: lime;opacity: .8;}}
    @keyframes rotate {from {transform: rotate(0);} to {transform: rotate(360deg);}}
    @keyframes rot {from { transform: translate(-50%, -50%) rotateX(35deg) rotateY(10deg) rotateZ(0deg);}to {transform: translate(-50%, -50%) rotateX(35deg) rotateY(10deg) rotateZ(360deg);}}
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 20%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }

</style>
</style>
    <div id="pa">
      <audio id="aud" src="https://www.joy127.com/url/135932.mp3" autoplay loop></audio>
      <video class ="pd-vid" src="https://video.699pic.com/videos/48/99/63/a_JQ9bv8G8yWXj1560489963_10s.mp4" autoplay loop muted></video>
      <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
         <video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/17/89/V-178913-E34CF379.mp4" autoplay loop muted></video>
         <div id="mwrap"></div>
      <div id="dt"><img id="Img" src="https://bbs.cnzv.cc/up/upload/pic/12/20250920-d6994dc217ef0e4fdb52d734abfdd59d.gif" style="width: 206px;height:250px;" alt="" /></div>               
         <svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-300 -300 600 600">
              <g id="g1" class="brightness"><title>播放/暂停</title></g>
        </svg>
         
   </div>
    <script type="module">
      import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
      import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
       import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        lrc(pa, geci);   
var dr = Dr.dr(progress);
      dr.polygon('0 -50,180 -180,100 100', 'none', 'Green', 3).addTo('g1').rotates(22);
      dr.circle(0, 0, 15, 'Green', 'Gold', 5).addTo('g1');   
      FS(pa, progress);
      
      const VideoBlendController = (function() {
            let config = {
                videoId: 'vid',
                interval: 12000,
                opacityRange: ,
                blendModes: [
                  'screen', 'overlay', 'soft-light', 'hard-light',
                  'multiply', 'difference', 'exclusion', 'hue',
                  'color-dodge', 'color-burn', 'luminosity'
                ]
            };
            let videoElement = null;
            let effectTimer = null;

            function getRandomInRange(min, max) {
                return (Math.random() * (max - min) + min).toFixed(2);
            }

            function applyRandomEffect() {
                if (!videoElement) return;
               
                const randomMode = config.blendModes[
                  Math.floor(Math.random() * config.blendModes.length)
                ];
               
                const randomOpacity = getRandomInRange(
                  config.opacityRange,
                  config.opacityRange
                );
               
                videoElement.style.mixBlendMode = randomMode;
                videoElement.style.opacity = randomOpacity;
                console.log(`视频混合模式更新: ${randomMode} (透明度: ${randomOpacity})`);
            }

            return {
                init: function(options = {}) {
                  Object.assign(config, options);
                  videoElement = document.getElementById(config.videoId);
                  
                  if (videoElement) {
                        videoElement.onerror = () => {
                            console.error('视频资源加载失败，请检查地址是否有效');
                        };
                  } else {
                        console.error(`未找到ID为"${config.videoId}"的视频元素`);
                        return;
                  }
                  
                  if (!aud.paused) {
                        this.start();
                  }
                },

                start: function() {
                  this.stop();
                  applyRandomEffect();
                  effectTimer = setInterval(applyRandomEffect, config.interval);
                },

                stop: function() {
                  if (effectTimer) {
                        clearInterval(effectTimer);
                        effectTimer = null;
                  }
                },

                toggleOnce: function() {
                  applyRandomEffect();
                },

                updateConfig: function(newConfig) {
                  Object.assign(config, newConfig);
                  this.start();
                }
            };
      })();
      
      var mState = () => {
            g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
            dt.style.setProperty('--visibility', aud.paused ? 'hidden' : 'inherit');         
            mwrap.style.setProperty('--state',aud.paused ? 'paused' : 'running');

            if (aud.paused) {
                VideoBlendController.stop();
            } else {
                VideoBlendController.start();
            }
      };      
      aud.oncanplay = aud.onplaying = aud.onpause = () => mState();   
         progress.onclick = () => {
            aud.paused ? aud.play() : aud.pause();         
            mState();            
      };      
      document.addEventListener('DOMContentLoaded', function() {
            VideoBlendController.init({
                videoId: 'vid',
                interval: 5000,
                opacityRange: [.5, .9]
            });
      });
      
    var txtAr = '夏天里等下雪冬天里等花开 '.split(''),
      spans = [],
      total = 12;
    txtAr.forEach((t, k) => {
      var s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text ani' : 'title-text';
      var a = -140 / (txtAr.length - 1) * k - 120,
            r = 130;
      s.style.cssText += `
            left: ${r + r * Math.cos(a * Math.PI / 122)}px;
            top: ${r + r * Math.sin(a * Math.PI / 122)}px;
      `;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('ani');
            spans[(k + 1) % txtAr.length].classList.add('ani');
      };
      mwrap.appendChild(s);
    });
</script>

klxf 发表于 2025-10-13 23:50:09

漂亮！谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2025-10-14 17:43:08

klxf 发表于 2025-10-13 23:50
漂亮！谢谢醉美管理员精彩分享

这个是你的播放器！感觉挺漂亮的！

klxf 发表于 2025-10-14 18:46:00

本帖最后由 klxf 于 2025-10-14 18:52 编辑

醉美水芙蓉 发表于 2025-10-14 17:43
这个是你的播放器！感觉挺漂亮的！
谢谢喜欢~也可优化一下

爱站 发表于 4 天前

分享很有用，点赞来支持
页: [1]
查看完整版本: 夏天里等下雪冬天里等花开