山茶花读不懂白玫瑰 --- 模仿《亦是金》网友帖
本帖最后由 起个网名好难 于 2023-5-13 00:08 编辑 <br /><br /><style>#lrc { --motion: cover1; --tt: 1s; position: absolute; bottom: 25px; font: bold 2.6em sans-serif; color: #FAEFC0;
-webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width:100%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;
background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes yao {
from{transform: perspective(800px) rotatex(45deg); }
to { transform: perspective(800px) rotatex(-45deg); }
}
.title {
position:absolute;width:800px;height: 30px;top:30px;LEFT: 30px;z-index: 100;text-align:left;
filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff);
animation: yao 1.0s linear infinite alternate var(--state); font-family:微软简中圆;font-weight: bold;color: #f46ff6;transform-origin: top;margin: auto;}
.title span:nth-child(1) {color:#fb52f9;font-size:32px;}
.title span:nth-child(2) {color:#3d46f7;font-size:20px;}
#papa {
margin: auto;
top: 0px;
left: 0px;
width: 1000px;
height: 667px;
background: tan url('https://puui.qpic.cn/vpic_cover/o350602lkya/o350602lkya_1679226623_hz.jpg') no-repeat center / cover;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;margin:100px 0 32px -200px;
box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
overflow:hidden;border-radius:1%;--state:paused;
}
#footDesc {
position:absolute; right:20px; bottom:20px;color:#ff0000;font-family:华文隶书;font-size:20px;font-weight:bold;
filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)
}
</style>
<div id="papa">
<css-doodle grid="16">
:doodle {
@size: 1000px 667px;
}
position: absolute;
left: -10%;
top: @r(100)%;
:after {
position: absolute;
content: '@p(♪,¶,♫,♯,♭,♮,♩,♬)';
color:pink;
font-size: @r(10, 40)px;
}
animation: fall @r(6,20)s @r(-6, 6)s infinite var(--state);
@keyframes fall {
0% { left: -20%; transform: rotate(0deg); }
100% {left: 120%; transform: rotate(@p(360, 720)deg); }
}
</css-doodle>
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="z-index:88;position:absolute; top: 400px;right:50px;">
<div class="title"><span>《 山茶花读不懂白玫瑰 》</span><span> - Lil笑笑</span></div>
<span id="footDesc">模仿《亦是金》网友帖 </span>
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2019620319" autoplay= "autoplay"></audio>
<css-doodle id="mplayer">
:doodle {
@grid: 2 / 350px 100px;
position: absolute;
color: var(--color);
bottom: 0;
--prog: 0%;
--size: 60px;
--ttmsg1: '00:00';
--ttmsg2: '00:00';
--color: #f63414;
bottom:60px;
}
@nth(1) {@place: 35% 100%;:after { content: var(--ttmsg1); }}
@nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);}
@nth(3) {@place: 65% 100%;:after { content: var(--ttmsg2); }}
@nth(4) {@place: 50% 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>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
/*********************************************************************/
let mKey = 0, mFlag = true, slip = 0.1;
let lrcAr =[
['0.00', ' 作词 : 晨晨晨',0.95],
['1.00', ' 作曲 : 晨晨晨',0.95],
['2.00', ' 编曲 : 卡其漠罗洋/王灏',0.95],
['3.00', ' 制作人 : 苏晨',12.91],
['16.59', '有一个善良纯洁的女孩',3.19],
['19.95', '在下雪的冬天划亮了火柴',3.25],
['23.37', '手捧温暖的光向你走来',3.22],
['26.76', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
['30.75', '有一个天真浪漫的男孩',3.13],
['34.05', '用白色衬衫把阳光叫醒来',3.36],
['37.59', '声音发出在不同的时代',3.13],
['40.89', '”我足与你相配“的告白（白玫瑰花语）',5.33],
['46.50', '山茶花 读不懂白玫瑰',3.51],
['50.19', '北山的风吹不到南山尾',3.33],
['53.70', '你羡慕我孤独的纯粹',2.94],
['56.79', '我羡慕你总会有人陪',3.56],
['60.54', '山茶花 读不懂白玫瑰',3.56],
['64.29', '遗憾的花不能一起枯萎',3.31],
['67.77', '只想疲惫时有你依偎',2.94],
['70.86', '从此再也不怕夜的黑',20.58],
['92.52', '有一个善良纯洁的女孩',3.11],
['95.79', '在下雪的冬天划亮了火柴',3.33],
['99.30', '手捧温暖的光向你走来',3.19],
['102.66', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
['106.65', '有一个天真浪漫的男孩',3.13],
['109.95', '用白色衬衫把阳光叫醒来',3.36],
['113.49', '声音发出在不同的时代',3.11],
['116.76', '”我足与你相配“的告白（白玫瑰花语）',5.36],
['122.40', '山茶花 读不懂白玫瑰',3.51],
['126.09', '北山的风吹不到南山尾',3.31],
['129.57', '你羡慕我孤独的纯粹',2.94],
['132.66', '我羡慕你总会有人陪',3.56],
['136.41', '山茶花 读不懂白玫瑰',3.59],
['140.19', '遗憾的花不能一起枯萎',3.31],
['143.67', '只想疲惫时有你依偎',2.94],
['146.76', '从此再也不怕夜的黑',5.33],
['152.37', '山茶花 读不懂白玫瑰',3.51],
['156.06', '北山的风吹不到南山尾',3.33],
['159.57', '你羡慕我孤独的纯粹',2.91],
['162.63', '我羡慕你总会有人陪',3.62],
['166.44', '山茶花 读不懂白玫瑰',3.56],
['170.19', '遗憾的花不能一起枯萎',3.31],
['173.67', '只想疲惫时有你依偎',2.96],
['176.79', '从此再也不怕夜的黑',4.23],
['181.24', ' 混音 : 任天宇',4.23],
['185.69', ' 合声 : 李沅芷',4.23],
['190.14', ' 统筹 : 申佳琪',4.23],
['194.59', ' 监制 : 刘家泽/苏晨',4.23],
['199.04', ' 制作公司 : 匠心音乐 x 蔚来音乐 V-LAND Music`',4.5]
];
aud.loop = false;
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 = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration-aud.currentTime)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
/**************************更新歌词**********************************/
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
papa.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
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>
本帖最后由 起个网名好难 于 2023-5-13 00:09 编辑
<style>
#lrc { --motion: cover1; --tt: 1s; position: absolute; bottom: 25px; font: bold 2.6em sans-serif; color: #FAEFC0;
-webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width:100%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;
background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes yao {
from{transform: perspective(800px) rotatex(45deg); }
to { transform: perspective(800px) rotatex(-45deg); }
}
.title {
position:absolute;width:800px;height: 30px;top:30px;LEFT: 30px;z-index: 100;text-align:left;
filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff);
animation: yao 1.0s linear infinite alternate var(--state); font-family:微软简中圆;font-weight: bold;color: #f46ff6;transform-origin: top;margin: auto;}
.title span:nth-child(1) {color:#fb52f9;font-size:32px;}
.title span:nth-child(2) {color:#3d46f7;font-size:20px;}
#papa {
margin: auto;
top: 0px;
left: 0px;
width: 1000px;
height: 667px;
background: tan url('https://puui.qpic.cn/vpic_cover/o350602lkya/o350602lkya_1679226623_hz.jpg') no-repeat center / cover;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;margin:100px 0 32px -200px;
box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;
overflow:hidden;border-radius:1%;--state:paused;
}
#footDesc {
position:absolute; right:20px; bottom:20px;color:#ff0000;font-family:华文隶书;font-size:20px;font-weight:bold;
filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)
}
</style>
<div id="papa">
<css-doodle grid="16">
:doodle {
@size: 1000px 667px;
}
position: absolute;
left: -10%;
top: @r(100)%;
:after {
position: absolute;
content: '@p(♪,¶,♫,♯,♭,♮,♩,♬)';
color:pink;
font-size: @r(10, 40)px;
}
animation: fall @r(6,20)s @r(-6, 6)s infinite var(--state);
@keyframes fall {
0% { left: -20%; transform: rotate(0deg); }
100% {left: 120%; transform: rotate(@p(360, 720)deg); }
}
</css-doodle>
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" style="z-index:88;position:absolute; top: 400px;right:50px;">
<div class="title"><span>《 山茶花读不懂白玫瑰 》</span><span> - Lil笑笑</span></div>
<span id="footDesc">模仿《亦是金》网友帖 </span>
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2019620319" autoplay= "autoplay"></audio>
<css-doodle id="mplayer">
:doodle {
@grid: 2 / 350px 100px;
position: absolute;
color: var(--color);
bottom: 0;
--prog: 0%;
--size: 60px;
--ttmsg1: '00:00';
--ttmsg2: '00:00';
--color: #f63414;
bottom:60px;
}
@nth(1) {@place: 35% 100%;:after { content: var(--ttmsg1); }}
@nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);}
@nth(3) {@place: 65% 100%;:after { content: var(--ttmsg2); }}
@nth(4) {@place: 50% 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>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
/*********************************************************************/
let mKey = 0, mFlag = true, slip = 0.1;
let lrcAr =[
['0.00', ' 作词 : 晨晨晨',0.95],
['1.00', ' 作曲 : 晨晨晨',0.95],
['2.00', ' 编曲 : 卡其漠罗洋/王灏',0.95],
['3.00', ' 制作人 : 苏晨',12.91],
['16.59', '有一个善良纯洁的女孩',3.19],
['19.95', '在下雪的冬天划亮了火柴',3.25],
['23.37', '手捧温暖的光向你走来',3.22],
['26.76', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
['30.75', '有一个天真浪漫的男孩',3.13],
['34.05', '用白色衬衫把阳光叫醒来',3.36],
['37.59', '声音发出在不同的时代',3.13],
['40.89', '”我足与你相配“的告白（白玫瑰花语）',5.33],
['46.50', '山茶花 读不懂白玫瑰',3.51],
['50.19', '北山的风吹不到南山尾',3.33],
['53.70', '你羡慕我孤独的纯粹',2.94],
['56.79', '我羡慕你总会有人陪',3.56],
['60.54', '山茶花 读不懂白玫瑰',3.56],
['64.29', '遗憾的花不能一起枯萎',3.31],
['67.77', '只想疲惫时有你依偎',2.94],
['70.86', '从此再也不怕夜的黑',20.58],
['92.52', '有一个善良纯洁的女孩',3.11],
['95.79', '在下雪的冬天划亮了火柴',3.33],
['99.30', '手捧温暖的光向你走来',3.19],
['102.66', '“你怎能轻视她对你的爱”（山茶花花语）',3.79],
['106.65', '有一个天真浪漫的男孩',3.13],
['109.95', '用白色衬衫把阳光叫醒来',3.36],
['113.49', '声音发出在不同的时代',3.11],
['116.76', '”我足与你相配“的告白（白玫瑰花语）',5.36],
['122.40', '山茶花 读不懂白玫瑰',3.51],
['126.09', '北山的风吹不到南山尾',3.31],
['129.57', '你羡慕我孤独的纯粹',2.94],
['132.66', '我羡慕你总会有人陪',3.56],
['136.41', '山茶花 读不懂白玫瑰',3.59],
['140.19', '遗憾的花不能一起枯萎',3.31],
['143.67', '只想疲惫时有你依偎',2.94],
['146.76', '从此再也不怕夜的黑',5.33],
['152.37', '山茶花 读不懂白玫瑰',3.51],
['156.06', '北山的风吹不到南山尾',3.33],
['159.57', '你羡慕我孤独的纯粹',2.91],
['162.63', '我羡慕你总会有人陪',3.62],
['166.44', '山茶花 读不懂白玫瑰',3.56],
['170.19', '遗憾的花不能一起枯萎',3.31],
['173.67', '只想疲惫时有你依偎',2.96],
['176.79', '从此再也不怕夜的黑',4.23],
['181.24', ' 混音 : 任天宇',4.23],
['185.69', ' 合声 : 李沅芷',4.23],
['190.14', ' 统筹 : 申佳琪',4.23],
['194.59', ' 监制 : 刘家泽/苏晨',4.23],
['199.04', ' 制作公司 : 匠心音乐 x 蔚来音乐 V-LAND Music`',4.5]
];
aud.loop = false;
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 = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration-aud.currentTime)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
/**************************更新歌词**********************************/
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
papa.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
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>
问好老师！我反复试帖老师的指导，不知道为什么歌曲暂停时，飞花不能停止！现在又老师的帖子，我可以套用了！谢谢老师！{:4_190:} 亦是金 发表于 2023-5-12 16:23
问好老师！我反复试帖老师的指导，不知道为什么歌曲暂停时，飞花不能停止！现在又老师的帖子，我可以套用了 ...
您帖子的代码套用了多处的代码，有的是有歌词的，有的就只有歌曲。我只是把您的代码去重、合拼整理了一下。 谢谢老师代码！{:4_190:}我收藏了，慢慢学习琢磨！ 感谢分享，好漂亮啊！{:4_187:} 梦缘 发表于 2023-5-12 16:56
感谢分享，好漂亮啊！
谢谢支持与欣赏！
借用网友的代码做的练习{:5_106:} 醉美水芙蓉 发表于 2023-5-12 17:27
欣赏老师的佳作！
谢谢支持与欣赏！
借用网友的代码做的练习{:5_106:} 欣赏不已 小文 发表于 2023-5-12 17:36
欣赏不已
谢谢支持与欣赏！
借用网友的代码做的练习{:5_106:} 这个好，有飘飞的花朵，还有最新版播放器和歌词同步，难难好帖{:4_199:} 这个全了，什么都有{:4_173:} 红影 发表于 2023-5-12 17:55
这个好，有飘飞的花朵，还有最新版播放器和歌词同步，难难好帖
谢谢支持与欣赏！
这个是借用网友的代码做的练习，我自己做的一般是省略掉控制的那一套。
感谢分享，好漂亮啊！{:4_187:} 起个网名好难 发表于 2023-5-12 18:22
谢谢支持与欣赏！
这个是借用网友的代码做的练习，我自己做的一般是省略掉控制的那一套。
虽然是借用了代码，难难自己也做了很多修改的，很赞{:4_187:} 红影 发表于 2023-5-12 19:13
虽然是借用了代码，难难自己也做了很多修改的，很赞
人家把框架搭好了我只作了点小修补{:5_106:} 焱鑫磊 发表于 2023-5-12 19:11
感谢分享，好漂亮啊！
谢谢支持与欣赏， 晚上好！ 今天的 unpkg.com 访问有问题，GitHub也是，到了需要翻墙的程度了 本帖最后由 起个网名好难 于 2023-5-12 21:58 编辑
马黑黑 发表于 2023-5-12 21:47
今天的 unpkg.com 访问有问题，GitHub也是，到了需要翻墙的程度了
似乎还好，没见显示代码的情况。
页:
[1]
2