枕着光的她

杨帆发表于 2025-10-28 21:47

本帖最后由杨帆于 2025-10-28 22:42 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>枕着光的她 - 任素汐</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { position: relative;--display: block; --offsetX: 81px;--bg: url('https://pic1.imgdb.cn/item/68fcf1863203f7be009edac0.jpg') no-repeat center/cover;z-index: 1;}
#pa:hover #xg{ opacity: 1; scale: .5;transform: translate(-800px);bottom:150px;}
#xg{ position: absolute;display:var(--display,none); cursor: pointer;right: -150px; bottom: -100px; scale: .2; opacity: 0; transition: 1.5s; z-index: 1;}
#xq{ position: absolute;display: var(--display, block); left:-650px; top: -650px; scale: .2; transition: .5s; z-index: -1;}
#mwrap {position: absolute;perspective: 800px;transform-style: preserve-3d;left: 95%; top: 30%; z-index: 5;transform: translate(-50%, -50%); width: 400px; height: 400px;--state: running;}
#progress {position: absolute;width: 80%; height: 80%; cursor: pointer;right:25%; top: -10.5%;transition: .4s;}
#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-slow 8s linear infinite var(--state),rot 8s linear infinite var(--state); }
#xss { position: absolute;right: -60px; bottom: -50px; scale: .2;transition: left 0.3s, top 0.3s;z-index: 1;}
#g1:hover {animation-play-state: paused; }
#scroll { position: absolute; left: 2%; top: 30%; width: 450px; height: 300px; padding: 15px; border-color: currentColor !important; z-index: 5; }
#marquee { height: 100%; overflow: hidden; }
#marquee> div { text-align: center; animation: marquee 15s linear infinite var(--state); }
#marquee:hover > div { animation-play-state: paused; }
.tit { font: bold 1.6em SimKai; line-height: 2.8; font-weight: 600; color:Snow; user-select: none; }
.tit h3 { margin: 0 0 15px 0; }
@keyframes marquee {0% { transform: translateY(0%); }100% { transform: translateY(-100%); }}
@keyframes rot {to {filter: hue-rotate(360deg);}}
.title-text {font: bold 30px 'Microsoft YaHei', sans-serif;color:CornFlowerBlue;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-fast 1s linear var(--state);}
@keyframes flash {to { color:lime;opacity: .8;}}
@keyframes rotate-fast {from {transform: rotate(0);} to {transform: rotate(360deg);}}
@keyframes rotate-slow {from {transform: rotate(0);} to {transform: rotate(360deg);}}
#btnFs { left: 20px; top: 20px; color: gold; border-color: currentColor !important;z-index: 5; }
#lrc { right: 20px; bottom: 20px; color: gray; }
#lrc::before { background: url('https://638183.freep.cn/638183/small/2025/aa.webp'); background-clip: text; }
#vid { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;opacity: .8; object-fit: cover; overflow: hidden; z-index: 1;transition:.5s;}
.raindrop {
position: absolute;
top: 0;
background: linear-gradient(to bottom, transparent, snow);
transform: translateX(50px);
animation: drop var(--dur) var(--delay) infinite linear var(--state);
z-index: 2;
}
@keyframes drop {to { top: 100%;
   transform: translateX(-90px);}}
</style>
<div id="pa">
   <img id="xg" src="https://pic.imgdb.cn/item/643b26c20d2dde577712571d.gif" alt="" >
   <img id="xq" src="https://pic1.imgdb.cn/item/68fd7d4a3203f7be009fc00a.png" alt="" >
   <img id="xss" src="https://pic1.imgdb.cn/item/6868de0658cb8da5c890fc56.png" alt="" >
   <audio id="aud" src="https://upfile.mp3.wf/view.php/411c9148f99b0432a060ea5e1160dbd8.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" class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
   <div id="mwrap"> <svg id="progress" class="grayscale" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <defs>
<linearGradient id="lGrd" gradientTransform="rotate(45)">
<stop offset="5%" stop-color="gold" />
            <stop offset="55%" stop-color="GoldenRod" />
<stop offset="95%" stop-color="Orange" />
</linearGradient>
</defs>
   <g id="g1" class="brightness"><title>播放/暂停</title></g>
</svg></div>
<div id="lrc" data-lrc=""></div>
   <div id="scroll">
         <div id="marquee">
            <div class="tit">
               <h3>枕着光的她 - 任素汐</h3>
               该词曲充盈着浓厚的人间烟火气息<br />主人公在晚风中与爱人携手回家<br />无论是在婚礼还是病床前<br />爱人的关怀始终如一<br />让她的芳华深深镌刻在心间<br />传达了平凡中的幸福和陪伴的力量<br />让人感受到爱情的美好与持久
            </div>
         </div>
   </div>
</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/yslrc-only.js';
   FS(pa, progress);
   function getRandomColor() {
   const hue = Math.floor(Math.random() * 360);
   const saturation = 70;
   const lightness = 50;
   return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
   const randomFillColor = getRandomColor();
   var dr = Dr.dr(progress);
   dr.polygon('0 -80, -10 -60, 0 0, 10 -60',randomFillColor, 'url(#lGrd)', 3).addTo('g1').rotates(13);
   dr.circle(0, 0, 8, 'Tomato', 'Gold', 5).addTo('g1');

   const VideoBlendController = (function() {
   let config = {
   videoId: 'vid',
   interval: 12000,
   opacityRange: [.4, .9],
   blendModes: [
   'screen', 'overlay', 'soft-light', 'hard-light',
   'multiply', 'difference', 'exclusion', 'hue', '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 = () => {
   const currentState = aud.paused ? 'paused' : 'running';
   g1.style.setProperty('--state', currentState);
   mwrap.style.setProperty('--state', currentState);
   xg.title = '暂停';
   document.querySelectorAll('.raindrop').forEach(drop => {
   drop.style.setProperty('--state', currentState);
});
   if (aud.paused) {
   VideoBlendController.stop();
} else {
   VideoBlendController.start();
}};
   aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
   xg.onclick = progress.onclick = () => {
         aud.paused ? aud.play() : aud.pause();
         xg.style.setProperty('--display', aud.paused ? 'none' : 'block' );
         xq.style.setProperty('--display', aud.paused ? 'none' : 'block' );
   };
   document.addEventListener('DOMContentLoaded', function() {
function createRaindrops() {
const pa = document.getElementById('pa');
if (!pa) return;
for (let i = 0; i < 10; i++) {
   const raindrop = document.createElement('div');
   raindrop.className = 'raindrop';
   raindrop.style.cssText = `
   --dur: ${0.4 + Math.random() * 0.4}s;
   --delay: ${Math.random() * -0.8}s;
   width: ${1 + Math.round(Math.random())}px;
   height: ${8 + Math.random() * 15}px;
   left: ${Math.random() * 100}%;
   `;
   pa.appendChild(raindrop);
}
}
createRaindrops();
VideoBlendController.init({ interval: 5000 });
   });
var txtAr = '枕着光的她 '.split(''),
   spans = [],
   total = 5;
   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 = 100;
   s.style.cssText += `
         left: ${r + r * Math.cos(a * Math.PI / 180)}px;
         top: ${r + r * Math.sin(a * Math.PI / 180)}px;
   `;
   spans.push(s);
   s.onanimationend = () => {
         s.classList.remove('ani');
         spans[(k + 1) % txtAr.length].classList.add('ani');
   };
   mwrap.appendChild(s);
});
var geci = `
枕着光的她 - 任素汐
词：易家扬/临渡/赵棠舟
曲：任素汐
编曲：刘鑫磊
制作人：刘鑫磊
透过窗看一幕童话
枕着光芒的云下
晚风轻轻地吹过她的银发
他笑着等她一起慢慢走回家
幸福有时候不说话
总在平凡里发着芽
就算日子偶尔有伤疤
也能从里面长出新枝桠对吗
枕着光的她往前走
路上难免风吹雨打
叫上一声老伴啊便有人应答
她就晓得到了家
等到岁月把皱纹缝成一朵花
他们挽着手把生活过成一幅画
可能她一千帧的芳华
都绣在了心里吧
陪伴是回答
他婚礼上对她说别哭
他病中对她说别哭
爱是两个小人儿遇上
都在努力给对方照个亮
等到岁月把皱纹缝成一朵花
他们挽着手把生活过成一幅画
可能她一千帧的芳华
都绣在了心里吧
枕着光的路上有个他不怕
`;
lrc(pa, geci);
</script><script>
   const progress = document.getElementById('progress');
   const xss = document.getElementById('xss');
   let isPosition1 = true;
   progress.addEventListener('click', () => {
         if (isPosition1) {
            xss.style.left = '-250px';
            xss.style.top = '-40px';
         } else {
            xss.style.left = '50px';
            xss.style.top = '280px';
         }
         isPosition1 = !isPosition1;
   });
</script>
</body>
</html>

杨帆发表于 2025-10-28 21:48

本帖最后由杨帆于 2025-10-29 20:02 编辑 <br /><br /><style>
#ma {position: relative;width: 680px;height:450px;margin: -40px 20px;display: grid;place-items: center; cursor: default !important;transition: transform 1s;}
#textPath:hover { filter: drop-shadow(0 0 3px rgba(255,255,0,0.8));transition: transform 1s; }
</style>
<div id="ma">
<svg id="box"viewBox="0 0 650 300" xmlns="http://www.w3.org/2000/svg">
<defs>
   <linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
   <stop offset="0%" stop-color="#FF4500" />
   <stop offset="10%" stop-color="#F39C12" />
   <stop offset="50%" stop-color="#FFD700" />
   <stop offset="90%" stop-color="#D35400" />
   <stop offset="100%" stop-color="#C0392B" />
</linearGradient>
</defs>
<path d="M50,200 C150,100 250,300 350,200 C450,100 550,300 650,200" fill="none" stroke="none" id="path1"></path>
<text style="fill:url(#linear); font-size: 25px; font-weight: bold; font-family: SimKai; text-anchor: middle; dominant-baseline: middle;">
<textPath href="#path1" startOffset="0%" id="textPath">
   ★ 九九重阳，祝愿大家身心健康，开心快乐，幸福久久！ ★ 九九重阳，祝愿大家身心健康，开心快乐，幸福久久！
   <animate
         attributeName="startOffset"
         from="100%"
         to="0%"
         dur="30s"
         repeatCount="indefinite"
         id="textAnim"/>
</textPath>
</text>
</svg>
</div>
<script>
const textPath = document.getElementById('textPath');
const textAnim = document.getElementById('textAnim');
let originalDur = 30;
textPath.addEventListener('mouseenter', () => {
textAnim.setAttribute('dur', '100000s');
});
textPath.addEventListener('mouseleave', () => {
textAnim.setAttribute('dur', originalDur + 's');
});
</script>

红影发表于 2025-10-28 23:02

很感人的歌曲，如此美好的温暖的相依相伴，这才是相伴到永久的美妙。
欣赏杨帆好帖{:4_187:}

红影发表于 2025-10-28 23:04

这帖子做得好美啊，那只白狐的眼睛还会动呢，还有一对鸟儿和小松鼠。
暂停时候白狐隐去小松鼠也下来了，有趣。
那些转动字也好看，这个制作太赞了{:4_199:}

红影发表于 2025-10-28 23:05

杨帆发表于 2025-10-28 21:48
本帖最后由杨帆于 2025-10-28 22:04 编辑
#ma {position: relative;width: 800px;height:650px;margin ...

跟着杨帆一起祝福大家幸福久久{:4_187:}

子楹。 发表于 2025-10-28 23:05

漂亮怎么做到的。厉害

杨帆发表于 2025-10-28 23:10

红影发表于 2025-10-28 23:04
这帖子做得好美啊，那只白狐的眼睛还会动呢，还有一对鸟儿和小松鼠。
暂停时候白狐隐去小松鼠也下来了，有 ...

谢谢影子鼓励，鼓捣着玩呢，祝节日快乐{:4_204:}

杨帆发表于 2025-10-28 23:11

子楹。发表于 2025-10-28 23:05
漂亮怎么做到的。厉害

欢迎新朋友，谢谢鼓励，祝你在这玩得开心{:4_199:}

子楹。 发表于 2025-10-28 23:22

杨帆发表于 2025-10-28 23:11
欢迎新朋友，谢谢鼓励，祝你在这玩得开心

谢谢你的欢迎，一定借你吉言。开心开心再开心

梦江南 发表于 2025-10-29 12:20

很温馨的画面，歌曲也好听，这是让人羡慕的老伴。

梦江南 发表于 2025-10-29 12:20

欣赏杨帆的精美音画，重阳节快乐！{:4_187:}

杨帆发表于 2025-10-29 12:27

梦江南发表于 2025-10-29 12:20
欣赏杨帆的精美音画，重阳节快乐！

谢谢江南鼓励，祝福寿绵长、阖家幸福、节日快乐{:4_204:}

红影发表于 2025-10-29 22:14

杨帆发表于 2025-10-28 23:10
谢谢影子鼓励，鼓捣着玩呢，祝节日快乐

这个鼓捣得很好啊，杨帆厉害了{:4_187:}

杨帆发表于 2025-10-29 22:56

红影发表于 2025-10-29 22:14
这个鼓捣得很好啊，杨帆厉害了

喜欢而已，但不知不会的东西太多，谢谢影子鼓励{:4_204:}

偶然~ 发表于 2025-11-17 13:49

来欣赏杨帆的精品佳作，祝您创作如春泉涌流不息！

页: [1]

花潮论坛's Archiver

枕着光的她