玩动图【刘珂矣 - 半壶纱】
本帖最后由 亚伦影音工作室 于 2026-3-13 17:01 编辑 <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://pic1.imgdb.cn/item/69b3d2123c25a1c98035fda3.png) 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%;background: url(https://pic1.imgdb.cn/item/69b3d2123c25a1c98035fda3.png) no-repeat center / 100%;
position: absolute;
}
#dta img{
width: 100%;
height:100%;
}
#dtb{margin: 150px550px;z-index:2;
width: 120px;
height:120px;
position: absolute;
}
#dtb img{
width: 100%;
height:100%;
}
#dtc{margin: 350px450px;z-index:3;
width: 250px;background: url(https://pic1.imgdb.cn/item/69b3d1a93c25a1c98035d299.png) no-repeat center / 250px 250px;
height:250px;
position: absolute;
}
#dtc img{
width: 100%;
height:100%;
}
#wrapper {z-index: 9;
position: absolute; width: 100%;
padding: 5px;
font-size: 2.4em;font-weight: 400;
filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
text-align: center; transform: translate(-50%)rotate(15deg);
bottom: 460px;left: 68%;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://pic1.imgdb.cn/item/69b3c1553c25a1c980358191.gif"id="IMGa" />
</div>
<div id="dtb">
<img src="https://pic1.imgdb.cn/item/69b3c2ff3c25a1c9803581b8.gif"id="IMGb" />
</div>
<div id="dtc">
<img src="https://pic1.imgdb.cn/item/69b3c67c3c25a1c98035aa8c.gif"id="IMGc" />
</div>
<div id="wrapper"></div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/04/dc/e7/e217499af78492b44a0cfd473898ce86/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 = ''; imagec.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");
var imagec= document.getElementById("IMGc");
wrapper.onclick = () => aud.paused ? (aud.play(),imagea.play(),imageb.play(),imagec.play()) : (aud.pause(),imagea.stop(),imageb.stop(),imagec.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(12).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-14 06:17 编辑
部分动画来自小辣椒小辣椒
点击歌词暂停/开启
动图完美控制，谢谢亚伦老师精彩分享{:4_191:} 欣赏佳作，问候亚伦。 这歌词的排布正好在画的卷轴部分，构思巧妙。
制作很漂亮，欣赏亚伦老师好帖{:4_199:}
页:
[1]