你的答案 (cover: 阿冗) - 宋小睿
本帖最后由 亚伦影音工作室 于 2022-12-19 18:28 编辑 <br /><br /> <div class="papa"><audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music97249764.mp3" autoplay loop></audio>
<div class="conta">
<div id="midground" ></div>
<div class="btn">
<div id="img_border" ></div>
</div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<style>
.papa{margin: 10px -300px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f28bc5103f275435b25c165ca8088f77.jpg)0px 0px/100% 100%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;
}
.conta{
width: 100%;margin: 450px 150px;
}
#MusicPlayer{
width: 600px;
display: block;
margin: 0 auto;
}
.btn{
display: block;
margin: 0 auto;
}
.lrc{
width: 1000px;
height: 130px;position: absolute;
z-index: 3;
overflow: hidden;text-decoration:underline;color:#eeeeee;
display: block;
margin: 20px 50px;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:悟空大字库;
font-size: 40px;
color: #000078;transform: translate(50%,-5%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:left;/*歌词显示对齐方式：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 #ullrc li.active{
font-size: 40px;color: #ff0000;
text-align:left;
transform: translate(0%,25%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);
background-position: -1200px 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);
-webkit-animation:loop 3s linear 1;
}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
#midground{width: 1164px;height: 620px;position: absolute;
top: 0px;
left: 0px;z-index: 2;
opacity: 1;background: url("http://pan.yinhuabbs.cn/view.php/8f5776228feb2c1df001475073dd5caa.png")0 0/10% 10%;
animation: cc 3s linear infinite;
}
@keyframes cc{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);filter:hue-rotate(0deg)}
95% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1.5);filter:hue-rotate(360deg)}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1.5);opacity: .6;}
}
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:460px; left:900px;z-index: 6; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>
<script >
var lrc = `你的答案 (cover: 阿冗) - 宋小睿
作词：林晨阳
作曲：刘涛
也许世界就这样
我也还在路上
没有人能诉说
也许我只能沉默
眼泪湿润眼眶
可又不甘懦弱
低着头期待白昼
接受所有的嘲讽
向着风拥抱彩虹
勇敢的向前走
黎明的那道光
会越过黑暗
打破一切恐惧
我能找到答案
哪怕要逆着光
就驱散黑暗
丢弃所有的负担
不再孤单不再孤单
也许世界就这样
我也还在路上
没有人能诉说
也许我只能沉默
眼泪湿润眼眶
可又不甘懦弱
低着头期待白昼
接受所有的嘲讽
向着风拥抱彩虹
勇敢的向前走
黎明的那道光
会越过黑暗
打破一切恐惧
我能找到答案
哪怕要逆着光
就驱散黑暗
丢弃所有的负担
不再孤单不再孤单
黎明的那道光
会越过黑暗
打破一切恐惧
我能找到答案
哪怕要逆着光
就驱散黑暗
有一万种的力量
淹没孤单
不再孤单
也许世界就这样
我也还在路上
没有人能诉说
也许我只能沉默
眼泪湿润眼眶
可又不甘懦弱`;
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 = 80, lrc_ul_height = 60;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
midground.style.animationPlayState =MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () => midground.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => midground.style.animationPlayState = 'paused');
view.style.animationPlayState =MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>view.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>view.style.animationPlayState = 'paused');
cube.style.animationPlayState =MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>cube.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>cube.style.animationPlayState = 'paused');
</script >
欣赏精彩的制作{:4_199:} 我看见的界面简洁，不晓得是不是有其他特效没有出来{:4_170:} 美就一个字 非常漂亮的制作。欣赏亚伦老师好帖{:4_187:}
页:
[1]