给千羽美女的单图音画加歌词
本帖最后由 醉美水芙蓉 于 2023-6-12 21:54 编辑 <br /><br /> <style>#papa { margin: 90px -290px; width: 1164px; height: 640px; background: gray url('https://pic.imgdb.cn/item/643d1ed80d2dde577735d266.jpg ') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #ffffff); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 120px; height: 180px;left: 2%; z-index: 20;top:65%;overflow:hidden;}
#an{position: absolute;
top:0%; left:0%;
width: 100%;
height:100%;
}
@keyframes cover1{0% { width: 0%;letter-spacing: 0px; filter: blur(0px); } to { width: 500%;} }
@keyframes cover2 {0% { width: 0%;letter-spacing: 10px; color:#000090;}100% { width: 500%; letter-spacing: 0px;color:#ff0000; ; }}
</style>
<div id="papa">
<div id="mydiv">*</div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/643b26c20d2dde577712571d.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=316759.mp3" autoplay loop></audio>
<script>
(function() {
let mKey = 0, mFlag = true;
let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
let geci = ` 杨钰莹 - 我在春天等你
作词：苏拉
作曲：周笛
LRC编辑：醉美水芙蓉
淡淡思念
淡淡紫丁的芬芳
静静远去
静静时光的流淌
往事经过的地方
美丽的惆怅
就像那年那夜漫天的星光
轻轻的风
轻轻摇动了梦想
悄悄转身
悄悄流泪的脸庞
温暖背影的目光
像从前一样
我的心在飘向春天的云上
我在春天等你
思念随风化做雨
等到花又开的时候
和你在一起
天地之间守着我们的唯一
我在春天等你
山川岁月的约定
如果你抬头
看见那天上飘着云
那是我们今生最美的相遇
轻轻的风
轻轻摇动了梦想
悄悄转身
悄悄流泪的脸庞
温暖背影的目光
像从前一样
我的心在飘向春天的云上
我在春天等你
思念随风化做雨
等到花又开的时候
和你在一起
天地之间守着我们的唯一
我在春天等你
山川岁月的约定
如果你抬头看见
那天上飘着云
那是我们今生
最美的相遇
我在春天等你
山川岁月的约定
如果你抬头看见
那天上飘着云
那是我们今生
最美的相遇
那是我们今生
最美的相遇
谢谢欣赏！
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.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 image = document.getElementById("an"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
<style>
#mydiv {
margin: 0px auto;
width: 1164px;
height: 640px;
overflow: hidden;
cursor: pointer;
position: relative;
--state: paused;
}
.dot {
position: absolute;
left: 15%;
bottom: -10px;
width: 100px;opacity:.8;
height: 200px;
border-radius: 0%;
background: url('https://pic.imgdb.cn/item/643b2ff90d2dde5777196f86.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-640px); }}
</style>
<script>
Array.from({length: 60}).forEach( (item,key) => {
let sp = document.createElement('span');
let ww = Math.random() * 5 + 2;
sp.className = 'dot';
sp.style.cssText += `
--deg: ${-50 + Math.random() * 100}deg;
animation: ani 20s ${Math.random() * key - 4}s infinite alternate var(--state);
`;
mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>
欣赏精彩制作！ 这制作好漂亮，那小狐狸好漂亮。欣赏水芙蓉美女好帖{:4_199:} 羽儿的美图配上这样的动态效果和歌词真好，给两位美女点赞{:4_187:}{:4_187:} 岩新新 发表于 2023-6-12 21:59
欣赏精彩制作！
岩新新老师晚上好！ 红影 发表于 2023-6-12 22:02
这制作好漂亮，那小狐狸好漂亮。欣赏水芙蓉美女好帖
谢谢红影欣赏支持！ @千羽美女 快来喔！ 沒有最美，只有更美！简直把美的元素集中显示了！俺有空凑几个字来偷哈{:4_173:} 好看 欣赏水芙蓉美贴{:4_187:} 醉美水芙蓉 发表于 2023-6-12 22:10
@千羽美女 快来喔！
看见了，跑来的{:4_173:} 醉美水芙蓉 发表于 2023-6-12 22:09
谢谢红影欣赏支持！
问好水芙蓉，再赏好帖{:4_187:} 经芙蓉巧手儿再创作加工，给图增添了灵动和生气，{:4_187:} 同步歌词很别致，会眨眼睛的小狐狸好可爱，芙蓉也是代码高手{:4_181:} 给巧手儿芙蓉点赞送花花{:4_187:}{:4_204:}{:4_199:} 樵歌 发表于 2023-6-12 22:20
沒有最美，只有更美！简直把美的元素集中显示了！俺有空凑几个字来偷哈
樵歌早上好！ 千羽 发表于 2023-6-12 23:18
给巧手儿芙蓉点赞送花花
是羽儿的图图太美了！ 马黑黑 发表于 2023-6-12 22:25
好看
是羽儿的图图好看！ 欣赏老师的精彩分享，好看好听！{:4_187:} 梦缘 发表于 2023-6-13 17:34
欣赏老师的精彩分享，好看好听！
谢谢老师支持！
页:
[1]
2