蝴蝶按钮 -风中的遗憾
本帖最后由 亚伦影音工作室 于 2024-12-5 18:00 编辑 <br /><br /><style>#papa { margin: 10px 0 20px calc(50% - 681px); background:#800 url('https://pic.imgdb.cn/item/6741e221d29ded1a8c23b434.jpg')no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#tz { margin: 0px auto; bottom: 20px;width: 840px; height: 300px; border: 0px solid gray; position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 3.5em 华文隶书; 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); }
#vid {z-index: 2;
position: absolute;
width: 100%
height: 100%;
object-fit: cover;
mix-blend-mode: lighten;
}
#mypic {top:40%; left:43%;z-index: 20;
display: block;position: absolute;
width: 250px; height: 250px;mix-blend-mode: difference;
background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="mypic" ></div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/97/V-139799-78BE6C44.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/3b/80/de/8fab3d47a667d17a187afc80dbc5e472/audio.mp3" autoplay loop></audio>
<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>
<script>
mypic.onclick = () => aud.paused ?(aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');
</script>
https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png
蝴蝶长图 这个按钮很好看，老师辛苦了！
这个好创意。赞 亚伦这个播放器按钮漂亮的，和猫咪一样，亚伦会懂脑子{:4_187:} 感谢亚伦的精彩分享 还是个变色蝴蝶太美了 用长图做动态小播，这个方式真好，这个长图比猫的那个信息更丰富。十分漂亮的制作{:4_187:} 欣赏亚伦老师好帖{:4_199:}
页:
[1]