一键控制【霜染枫丹】动图
本帖最后由 亚伦影音工作室 于 2026-3-12 02:40 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa{
position: relative;
width: 1186px;
height: 620px;
margin-left: -300px;
margin-top: 150px;
overflow: hidden;z-index:12345;
background: url(https://ff.xiaoqiaodali.top:5401/i/2026/03/06/69aaab4517b9d.gif) no-repeat center / cover;
font-family: "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";--state:paused;
}
#dta{margin: 0px0px;z-index:1;
width: 100%;
height:100%;
position: absolute;
}
#dta img{
width: 100%;
height:100%;
}
#dtb{margin: 200px350px;z-index:1;
width: 250px;
height:250px;
position: absolute;
}
#dtb img{
width: 100%;
height:100%;
}
#wrapper {z-index: 9;
position: absolute; width: 100%;
padding: 5px;
font-size: 3em;font-weight: 400;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-align: center; transform: translate(-50%);
bottom: 30px;left: 50%;cursor: pointer;
}
.char {
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, flash 0.15s infinite alternate var(--state);
}
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg); }
}
</style>
<divid="papa">
<div id="dta">
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/03/06/69aaab4517b9d.gif"id="IMGa" />
</div>
<div id="dtb">
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/03/10/69af0de0d8916.gif"id="IMGb" />
</div>
<div id="wrapper"></div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/97/01/47/7765101630efdae81a0562cb8fa3739e/audio.mp3" loop autoplay ></audio>
</div>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 洢canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
//
imagea.style.opacity = ''; imageb.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С
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
canvas.style.position = 'absolute';
//
this.parentElement.insertBefore(canvas, this);
//
this.style.opacity = '0';
// 洢canvas
this.storeCanvas = canvas;
}
}
};
}
var imagea= document.getElementById("IMGa");
var imageb= document.getElementById("IMGb");
wrapper.onclick = () => aud.paused ? (aud.play(),imagea.play(),imageb.play()) : (aud.pause(),imagea.stop(),imageb.stop());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
<script>
const gc = `想和你成一家
作词：轻云望月/作曲：轻云望月
演唱：宇皓东
出品：亚伦影音工作室
桃花开了梨花白了小草已发芽
我要翻山越岭去见我的那个他
一个冬天没见面太多想说的话
亲爱的亲爱的 我真的想你啦
树儿绿了鱼儿游了春天已抵达
想起最爱的你怎不让我心如麻
春光越美我越是由衷把你牵挂
一颗心一片情 从没有参过假
我想你我念你 我已经难自拔
任何语言都不能把我的爱表达
只求春风捎去我心底的相思话
今生今世我只为你一人放不下
我等你我盼你 想和你成一家
梦里梦外都期待把你的手儿拉
祈祷缘分能够赐我陪你到白发
就算为你付出再多心也美美哒
树儿绿了鱼儿游了春天已抵达
想起最爱的你怎不让我心如麻
春光越美我越是由衷把你牵挂
一颗心一片情 从没有参过假
我想你我念你 我已经难自拔
任何语言都不能把我的爱表达
只求春风捎去我心底的相思话
今生今世我只为你一人放不下
我等你我盼你 想和你成一家
梦里梦外都期待把你的手儿拉
祈祷缘分能够赐我陪你到白发
就算为你付出再多心也美美哒
我想你我念你 我已经难自拔
任何语言都不能把我的爱表达
只求春风捎去我心底的相思话
今生今世我只为你一人放不下
我等你我盼你 想和你成一家
梦里梦外都期待把你的手儿拉
祈祷缘分能够赐我陪你到白发
就算为你付出再多心也美美哒
未经许可不得翻唱或使用
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(10).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
本帖最后由 亚伦影音工作室 于 2026-3-11 17:13 编辑
动图来源：霜染枫丹 谢谢亚伦工作室，很高兴有您的支持。小燕子我放慢了速度，就看出来了图片没有修边，呵呵~~我性子着急，下次作细致一些。{:4_173:}得到支持很高兴，祝您制作愉快~~{:4_204:}{:4_190:}
制作辛苦了！好听好看！谢谢分享！欣赏学习了！{:4_190:} 这个好像一暂停就换了图片呢，好像刚才拉上去，图片又换回来了。 https: //aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1767067097820487.mp4
页:
[1]