迟来的爱 - 小阿枫
本帖最后由 亚伦影音工作室 于 2025-6-8 09:10 编辑 <br /><br /><style>#papa {
margin: 10px-300px;
width: 1164px;
height: 620px;
background:#000000;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
display: grid;
place-items: center;
}
.lrc{ position: absolute;top:20px; left:5px;
width: 860px;
height: 550px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
z-index: 9;
overflow: hidden;
display: block;
margin: 20px -150px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 50px;
line-height: 50px;
font-family:悟空大字库;
font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrcli.active{
font-size: 30px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(45deg, #Ff0A0A 4%,#F0EC92 37%,#FBFAFA 68%,#06F61A 100%);
background-position: -2800px 0;
filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
}
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:78%;bottom: 2%;font-size: 15px; z-index: 9;}
</style>
<div id="papa">
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
<css-doodle id="mplayer">
:doodle {z-index:80 ;
@grid: 2 / 260px 60px;
position: absolute;
color: var(--color);
bottom: 5%;left: 72%;
--prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
}
/* 时间信息 : 左 */
@nth(1) {
@place: 10% 80%;
:after { content: var(--ttmsg1); }
}
/* 控制器 */
@nth(2) {
@size: var(--size);
clip-path: @shape(
points: 360;
r: abs.sin.tan(sin(3.5t)*1.14);
);
@place: 45% 35%;
background: var(--color);
animation: rot 6s infinite linear var(--state);
}
/* 时间信息 : 右 */
@nth(3) {
@place: 80% 80%;
:after { content: var(--ttmsg2); }
}
/* 进度条 */
@nth(4) {
@place: 40% 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 id="testImg" >
<span class="演员"></span>
<span class="演员"></span>
<span class="演员"></span>
<span class="演员"></span>
<span class="演员"></span>
<span class="演员"></span>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/92/6c/cd/c63834c18d6fcac16e2283ac7c05b8c1/audio.mp3" autoplay loop></audio>
<span id="bt">迟来的爱 - 小阿枫</span>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
});
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;
}
})();
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
<script >
var lrc = `迟来的爱 - 小阿枫
词：吕承明
曲：刘明瑞
编曲：胡晨
制作人：亚伦
和声：胡晨
吉他：潘春宇
混音/母带处理：胡晨
OP：亚伦影音工作室
一段情要埋藏多少年
一封信要迟来多少天
两颗心要 承受多少
痛苦的煎熬
才能够彼此完全明了
你应该会明白我的爱
虽然我从未向你坦白
多年以来 默默对你
深切的关怀
为什么你还不能明白
不愿放弃你的爱
这是我长久的期待
不能保留你的爱
那是对她无言的伤害
伤痛的心一片空白
如何面对那迟来的爱
独白：
我知道 一切都太迟了
明天你就要带着她
走进结婚礼堂
我羡慕她
同时也给你
最深的祝福
你应该会明白我的爱
虽然我从未向你坦白
多年以来 默默对你
深切的关怀
为什么你还不能明白
不愿放弃你的爱
这是我长久的期待
不能保留你的爱
那是对她无言的伤害
伤痛的心一片空白
如何面对那迟来的爱
伤痛的心一片空白
如何面对那迟来的爱`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 250;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
lrc.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>lrc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => lrc.style.animationPlayState = 'paused');
</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 8;
top:0px; left:0px;
animation: spin 24s infinite linear;
opacity: 0;
}
.演员:nth-of-type(1) {animation-delay: 20s;
background: url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg')no-repeat center/cover;
}
.演员:nth-of-type(2) {animation-delay: 16s;
background: url('https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg')no-repeat center/cover;
}
.演员:nth-of-type(3) {animation-delay: 12s;
background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover;
}
.演员:nth-of-type(4) {animation-delay: 8s;
background: url('https://pic.imgdb.cn/item/64f93f7e661c6c8e54359206.jpg')no-repeat center/cover;
}
.演员:nth-of-type(5) {animation-delay: 4s;
background:url('https://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.jpg')no-repeat center/cover;
}
.演员:nth-of-type(6) {animation-delay: 0s;
background: url('https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg')no-repeat center/cover;
}
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
0% { opacity: 0; }
8% { opacity: 1; } 10% { opacity: 1; }20% { opacity: 0; }
}
</style>
这样逐行上升的歌词也很漂亮呢，而且是同步的。欣赏亚伦老师好帖{:4_199:} 欣赏老师的音画，点赞！
页:
[1]