恰好你风情万种-烟嗓船长[特效转换]

亚伦影音工作室 发表于 2025-7-4 13:08

本帖最后由亚伦影音工作室于 2025-7-6 10:39 编辑 <br /><br /><style>
#papa {
   margin: 10px-300px;
   width: 1286px;
   height: 720px;
   background:#000;
   box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
   }

#tz { margin: 20px 0px; bottom: 0px;width: 840px; height: 300px;position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0px;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 200 3em/1em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);-webkit-background-clip: text;
-webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(120deg,#000078,#ff6ac6 25%,#00ff00 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff0000 95%,#000);
animation: flowCss 6s infinite linear ;
-webkit-background-size: 200% 100%; }
.stop #tz::before{animation-play-state: paused;}

@keyframes flowCss {
         0% {background-position: 0 0;}
      100% {background-position: -500% 0;}
   }

#bt{width: 200px; overflow: hidden; color:#fff; position: absolute; left:75%;text-align: center;bottom: 2%;font-size: 15px; z-index: 19;}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}

.zm{list-style: none;left: 0px;width:100%;height:720px;top:16%; position:absolute;z-index: 4;overflow:hidden;}
#e {list-style: none;width: 100%;height:100%;margin: 0px 0px;text-align: center;padding: 50px 0px;position: relative; line-height: 20px;animation: myfirst 60s 4 ;animation-delay: 4s;font: normal 2.2em/1.5em 华文行楷;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#eee 1px 0 0)drop-shadow(#eee 0 1px 0)drop-shadow(#eee -1px 0 0) drop-shadow(#eee 0 -1px 0);}
@keyframes myfirst {0% {opacity: 1;color:#000000;transform:scale(1)}6% {opacity: 1;color: #800000;transform:scale(1)}12% {opacity: 1;color: #800000;transform:scale(1)}40%{opacity: 1;color: rgb(255, 255, 255,0);transform:scale(1) }}
.stop #e{animation-play-state: paused;}

.dtbtn,.dttbtn,.dtttbtn{border-radius: 4px; position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 10px;z-index: 20;
font-size: 12px;
border: none;
cursor: pointer;margin: 30px 2px;left: 3%;
}

</style>

<div id="papa">
<divclass="zm" >
<div id="Img" ><divid="e" ><divstyle="transform: scale(3);">恰好你风情万种</div><br><div> 作词：我不知<br>作曲；更不知<br>演唱：烟嗓船长<br>出品：亚伦影音工作室<br>代码独创：亚伦</div></div> </div>
</div>
<css-doodle id="mplayer">
   :doodle {z-index:80 ;
            @grid: 2 / 260px 60px;
            position: absolute;
            color: var(--color);
            bottom: 5%;left: 72%;
            --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 10% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            clip-path: @shape(
            points: 360;
         r: abs.sin.tan(sin(3.5t)*1.14);
   );
            @place: 45% 35%;
            background: var(--color);
            animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 80% 80%;
            :after { content: var(--ttmsg2); }
   }
   /* 进度条 */
   @nth(4) {
            @place: 40% 80%;
            @size: 100% 2px;
            background: #bbb;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<p>
<button class="dtbtn" onclick="btn1()"title="切换tx">切换树叶</button>
<button class="dttbtn" onclick="btn2()"title="切换tx">切换百叶窗</button>
<button class="dtttbtn" onclick="btn3()"title="切换tx">切换五角星</button>
</p>
<div id="testImg" ><div id="tz" data-lrc="亚伦影音"></div></div>

<span id="bt">恰好你风情万种-烟嗓船长</span>
<div id="mm1" >
            <img class="yanyuan" > <img class="yanyuan" > <img class="yanyuan" > <img class="yanyuan" > <img class="yanyuan" > <img class="yanyuan" ><img class="yanyuan" > <img class="yanyuan" >
            </div>

<div id="mm2" >
            <img class="maren" > <img class="maren" > <img class="maren" > <img class="maren" > <img class="maren" > <img class="maren" ><img class="maren" > <img class="maren" >
            </div>

<div id="mm3" >
            <img class="anuan" > <img class="anuan" > <img class="anuan" > <img class="anuan" > <img class="anuan" > <img class="anuan" ><img class="anuan" > <img class="anuan" >
            </div>

</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/c0/54/95/f5802b1aef6ba5b51632ea80c3b88796/audio.mp3" autoplay loop></audio>

<script>
(function() {
   let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
   let script = document.createElement('script');
   script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
   document.head.appendChild(script);
   let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
   let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });

   mplayer.onclick = () => {
            if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
            if(clickIdx === 2) aud.currentTime = progChg;
   }
   mplayer.onmousemove = (e) => {
            let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
            clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
            mplayer.style.cursor = cursors;
            if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
   }
})();

</script>
<script>
(function(){
var image = document.getElementById("testImg");
var imagec = document.getElementById("Img");

let mState = () => aud.paused ? (image.classList.add('stop'),mm1.classList.add('stop'),imagec.classList.add('stop'),mm2.classList.add('stop'),mm3.classList.add('stop')):(image.classList.remove('stop'),mm1.classList.remove('stop'),imagec.classList.remove('stop'),mm2.classList.remove('stop'),mm3.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
   fullscreen.onclick = () => {
         if (fs) {
            fullscreen.innerText = '退出全屏';
            papa.requestFullscreen();
         } else {
            fullscreen.innerText = '全屏欣赏';
            document.exitFullscreen();
         }
         fs = !fs;
   };

var mm1 = document.getElementById("mm1");
var mm2 = document.getElementById("mm2");
var mm3 = document.getElementById("mm3");
function btn1() {
            mm1.style.display = 'block';
      mm2.style.display = 'none';
mm3.style.display = 'none';
   }

   function btn2() {
      mm1.style.display = 'none';
         mm2.style.display = 'block';
mm3.style.display = 'none';
   }
function btn3() {
      mm1.style.display = 'none';
         mm2.style.display = 'none';
mm3.style.display = 'block';
   }
</script>

<script >
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   let result = item.match(reg);
   let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
   lrcAr.push(.trim()]);
});
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
   tz.dataset.lrc = lrcAr;
   curkey ++;
}
};

var lrc = `烟嗓船长 - 恰好你风情万种
亚伦影音
恰好你风情万种我却碌碌庸庸
我两手空空怎许海誓山盟
恰好你百媚千红我却普普通通
一眼的惊鸿让我一生心动
恰好你风情万种我却碌碌庸庸
我年少无为不敢与你相拥
你恰似一帘幽梦梦醒是一场空
有缘遇见你无缘白头与共
我叹人生长恨流水长东
缘起缘灭聚散太过匆匆
这世间心酸回忆千万种
偏偏你给的最痛
恰好你风情万种我却碌碌庸庸
我两手空空怎许海誓山盟
只怪在错的时间和对的人相逢
我一片痴心换来遗憾无穷
恰好你风情万种我却碌碌庸庸
我年少无为不敢与你相拥
你恰似一帘幽梦梦醒是一场空
有缘遇见你无缘白头与共
我叹人生长恨流水长东
缘起缘灭聚散太过匆匆
这世间心酸回忆千万种
偏偏你给的最痛
恰好你风情万种我却碌碌庸庸
我两手空空怎许海誓山盟
只怪在错的时间和对的人相逢
我一片痴心换来遗憾无穷
`;
getAr(lrc);

</script>

<style>
#mm1 {display: none;}
.yanyuan {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top:0px; left:0px;
mask: url(https://pic1.imgdb.cn/item/67205f13d29ded1a8cdb1f0c.png) no-repeat center;
mask-size: 60% 100%;
animation: spin 24s infinite linear;
   opacity: 0;

}
@keyframes spin {
0% {opacity: 0;mask-size: 0% 0%;}10%{opacity: 1;mask-size: 60% 100%;}14%{opacity: 1;mask-size: 60% 100%;}
18%{opacity: 1;mask-size: 300% 350%;}24%{opacity: 0;mask-size: 300% 350%;}
}

#mm2 {}
.maren {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top:0px; left:0px;
mask: linear-gradient(90deg, #000 calc(6.5% * var(--seed)), transparent calc(6.5% * var(--seed)));
mask-size: 100px 100px;
animation: spin1 24s infinite linear;
   opacity: 0;
}

img:nth-of-type(1) {animation-delay: 20s;
   background: url('https://pic1.imgdb.cn/item/6713a87cd29ded1a8ccbc781.jpg')no-repeat center/cover;

}

img:nth-of-type(2) {animation-delay: 16s;
   background: url('https://pic1.imgdb.cn/item/67162491d29ded1a8c210f14.jpg')no-repeat center/cover;

}

img:ntht-of-type(3) {animation-delay: 12s;
   background: url('https://pic1.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg')no-repeat center/cover;

}

img:nth-of-type(4) {animation-delay: 8s;
   background: url('https://pic1.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg')no-repeat center/cover;

}

img:nth-of-type(5) {animation-delay: 4s;
   background:url('https://pic1.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg')no-repeat center/cover;

}

img:nth-of-type(6) {animation-delay: 0s;
   background: url('https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg')no-repeat center/cover;

}

@keyframes spin1 {
0%{opacity: 1;--seed:0}0.1%{opacity: 1;--seed:1}0.2%{opacity: 1;--seed:2}0.3%{opacity: 1;--seed:3}0.4%{opacity: 1;--seed:4}0.5%{opacity: 1;--seed:5}0.6%{opacity: 1;--seed:6}0.7%{opacity: 1;--seed:7}0.8%{opacity: 1;--seed:8}0.9%{opacity: 1;--seed:9}1%{opacity: 1;--seed:10}1.1%{opacity: 1;--seed:11}1.2%{opacity: 1;--seed:12}1.3%{opacity: 1;--seed:13}1.4%{opacity: 1;--seed:14}1.5%{opacity: 1;--seed:15}16%{opacity: 1;--seed:16}1.7%{opacity: 1;--seed:17}1.8%{opacity: 1;--seed:18}1.9%{opacity: 1;--seed:19}2%{opacity: 1;--seed:20}2.1%{opacity: 1;--seed:21}2.2%{opacity: 1;--seed:22}2.3%{opacity: 1;--seed:23}2.4%{opacity: 1;--seed:24}2.5%{opacity: 1;--seed:25}2.6%{opacity: 1;--seed:26}2.7%{opacity: 1;--seed:27}2.8%{opacity: 1;--seed:28}2.9%{--seed:29}3%{opacity: 1;--seed:30}3.1%{opacity: 1;--seed:31}3.2%{opacity: 1;--seed:32}3.3%{opacity: 1;--seed:33}3.4%{opacity: 1;--seed:34}3.5%{opacity: 1;--seed:35}3.6%{opacity: 1;--seed:36}3.7%{opacity: 1;--seed:37}3.8%{opacity: 1;--seed:38}3.9%{opacity: 1;--seed:39}4%{opacity: 1;--seed:40}4.1%{opacity: 1;--seed:41}4.2%{opacity: 1;--seed:42}4.3%{opacity: 1;--seed:43}4.4%{opacity: 1;--seed:44}4.5%{opacity: 1;--seed:45}4.6%{opacity: 1;--seed:46}4.7%{opacity: 1;--seed:47}4.8%{opacity: 1;--seed:48}4.9%{opacity: 1;--seed:49}5%{opacity: 1;--seed:50}5.1%{opacity: 1;--seed:51}5.2%{opacity: 1;--seed:52}5.3%{opacity: 1;--seed:53}5.4%{opacity: 1;--seed:54}5.5%{opacity: 1;--seed:55}5.6%{opacity: 1;--seed:56}5.7%{opacity: 1;--seed:57}5.8%{opacity: 1;--seed:58}5.9%{opacity: 1;--seed:59}6%{opacity: 1;--seed:60}6.1%{opacity: 1;--seed:61}6.2%{opacity: 1;--seed:62}6.3%{opacity: 1;--seed:63}6.4%{opacity: 1;--seed:64}6.5%{opacity: 1;--seed:65}6.6%{opacity: 1;--seed:66}6.7%{opacity: 1;--seed:67}6.8%{opacity: 1;--seed:68}6.9%{opacity: 1;--seed:69}7%{opacity: 1;--seed:70}7.1%{opacity: 1;--seed:71}7.2%{opacity: 1;--seed:72}7.3%{opacity: 1;--seed:73}7.4%{opacity: 1;--seed:74}7.5%{opacity: 1;--seed:75}7.6%{opacity: 1;--seed:76}7.7%{opacity: 1;--seed:77}7.8%{opacity: 1;--seed:78}7.9%{opacity: 1;--seed:79}8%{opacity: 1;--seed:80}8.1%{opacity: 1;--seed:81}8.2%{opacity: 1;--seed:82}8.3%{opacity: 1;--seed:83}8.4%{opacity: 1;--seed:84}8.5%{opacity: 1;--seed:85}8.6%{opacity: 1;--seed:86}8.7%{opacity: 1;--seed:87}8.8%{opacity: 1;--seed:88}8.9%{opacity: 1;--seed:89}9%{opacity: 1;--seed:90}9.1%{opacity: 1;--seed:91}9.2%{opacity: 1;--seed:92}9.3%{opacity: 1;--seed:93}9.4%{opacity: 1;--seed:94}9.5%{opacity: 1;--seed:95}9.6%{opacity: 1;--seed:96}9.7%{opacity: 1;--seed:97}9.8%{opacity: 1;--seed:98}9.9%{opacity: 1;--seed:99}10%{opacity: 1;--seed:99.5}18%{opacity: 0;--seed:100}
}

#mm3 {display: none;}
.anuan {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top:0px; left:0px;
mask: url(https://pic1.imgdb.cn/item/68649f8e58cb8da5c8864201.svg) no-repeat center;
mask-size: 60% 100%;
animation: spin2 24s infinite linear;
   opacity: 0;

}
@keyframes spin2 {
0% {opacity: 0;mask-size: 0% 0%;}10%{opacity: 1;mask-size: 60% 100%;}14%{opacity: 1;mask-size: 60% 100%;}
18%{opacity: 1;mask-size: 300% 350%;}24%{opacity: 0;mask-size: 300% 350%;}
}

.stop img:nth-of-type(1),
.stop img:nth-of-type(2),
.stop img:nth-of-type(3),
.stop img:nth-of-type(4),
.stop img:nth-of-type(5),
.stop img:nth-of-type(6){animation-play-state: paused;}

</style>

杨帆发表于 2025-7-4 17:16

特效转换顺畅，效果美妙，谢谢亚伦老师经典示范{:4_191:}

梦油发表于 2025-7-4 20:40

欣赏佳作，问候亚伦。

红影发表于 2025-7-4 22:11

这个好，可以切换图片轮播的方式呢{:4_199:}

红影发表于 2025-7-4 22:13

树叶效果和五角星效果都很好，不过还是很习惯百叶窗效果呢。
好像代码里有点问题，让论坛表情发生变化了呢{:4_173:}

页: [1]

花潮论坛's Archiver

恰好你风情万种-烟嗓船长[特效转换]