《爱你真好难》刘紫玲
<div style="z-index: 127;width: 1164px; height: 640px; margin-top:120px; margin-left:-280px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://pic2.imgdb.cn/item/645638d40d2dde5777f403d0.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;"><div class="HT">
<divid="testImg" class="love"><img src="https://pic2.imgdb.cn/item/645635560d2dde5777efbe1f.gif" style="width: 100%; height: 100%;z-index: 150;transform: rotateX(50deg)rotateY(0deg)rotateZ(0deg)scale(1);" >
</div>
<audio autoplay=""id="MusicPlayer"src="https://www.joy127.com/url/104579.mp3" loop="" ></audio>
<div class="btn">
<divid="testImg"id="bf"onclick="bf()"><input type="button" id="testBtn"value="ll"style="width: 30px; height: 30px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border-radius: 50%;box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 5px #eeeeee;"></div>
</div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;background: linear-gradient(55deg, rgba(6, 1, 1, 0.25) 18%,rgba(4, 50, 242, 0.79) 98%);" ></div>
<div class="lrc">
<div class="items"> <ul id="ullrc">
</ul>
</div></div>
</div>
</div></div>
<style type="text/css">
.love {margin: 0 auto;position: absolute;top:240px; left:600px;z-index: 150;
display: block;
width: 350px; height: 350px;
transform: rotateX(50deg)rotateY(0deg)rotateZ(0deg)scale(1);
animation: heart-burst 0.2s infinite ;
}
.stop {
animation-play-state: paused;
}
@keyframes heart-burst {
0% {transform: translate(0%,60%)scale(0.2);filter:hue-rotate(0deg)}
50% {transform: translate(0%,-50%)scale(2);filter:hue-rotate(360deg)}
100% {opacity: 1;translate(0%,60%)scale(0.2);filter:hue-rotate(0deg)}
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ; }
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == 'll') {
image.classList.add('stop');
this.value = '>';
} else {
image.classList.remove('stop');
this.value = 'll';
}
};
}
</script>
<style type="text/css">
.HT{
width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.btn{
display: block;z-index: 300;
margin: 0px 0px;position: absolute;top:530px; left:120px;
}
.lrc{
width: 870px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
display: block;position: absolute;top:530px; left:120px;z-index: 160;
margin: 0 auto;
}
.container .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: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*动画*/
.img_border{display:inline-block;width:1164px;height:640px;margin:0px ;position: absolute;top:0px; left:0px;z-index: 140;}
.img_border #aplay{ }
.z360z{animation:rotating 1s linear infinite}@keyframes rotating{0% {opacity: 1;background: linear-gradient(45deg, rgba(243, 4, 61, 0.63) 0%,rgba(67, 43, 255, 0.58) 100%);filter:hue-rotate(0deg)contrast(150%)brightness(80%);}
30% {opacity: 1;background: linear-gradient(55deg, rgba(6, 1, 1, 0.25) 18%,rgba(4, 50, 242, 0.79) 98%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
60% {opacity: 1;background: linear-gradient(65deg, rgba(4, 4, 243, 0.65) 0%,rgba(20, 245, 6, 0.6) 100%);filter:hue-rotate(0deg)contrast(140%)brightness(80%);}
90% {opacity: 1;background: linear-gradient(75deg, rgba(91, 0, 0, 0.12) 18%,rgba(44, 242, 4, 0.32) 98%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);}
}
</style>
<script>var lrc =`《爱你真好难》刘紫玲
LRC歌词制作：焱鑫磊
烟花欲飞洒江南
风停雨歇断桥边
情路苦短走将来
只为你浮现浮现
幽幽怨怨一对人
迷迷离离两相看
芳心肯许恐还难
惊梦为哪般为哪般
爱你真好难 啊
爱你痴心甘愿
不在乎千人指点
不惦记百世流传
爱你真好难 啊
爱你痴心甘愿
不在乎千人指点
不惦记百世流传
凡心已动不愿仙
月移花影谁缠绵
生来闭月羞花色
只为你容颜容颜
舍不舍得去问心
相不相信都是缘
聚了又散仍不悔
情牵为哪般为哪般
爱你真好难 啊
爱你痴心甘愿
不在乎千人指点
不惦记百世流传
爱你真好难 啊
爱你痴心甘愿
不在乎千人指点
不惦记百世流传
`;
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 = 70;
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;
</script>
<script>
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
bf.innerText="暂停";
} else {
audio.pause(); // 这个就是暂停
bf.innerText="播放";
}
}
}
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
这个颜色变化太快了呢，尤其歌词颜色的变化，看得眼睛都花了{:4_173:} 不过背景很美。欣赏焱鑫磊好帖{:4_187:} 好炫的帖，欣赏点赞！{:4_190:} 红影 发表于 2023-5-6 20:08
这个颜色变化太快了呢，尤其歌词颜色的变化，看得眼睛都花了
问候红影晚上好！{:4_187:} 红影 发表于 2023-5-6 20:08
不过背景很美。欣赏焱鑫磊好帖
问好！{:4_204:} 梦缘 发表于 2023-5-6 20:20
好炫的帖，欣赏点赞！
问候梦缘晚上好！{:4_204:} 欣赏焱鑫磊精彩制作{:4_199:}
这个背景效果有点晃眼睛 焱鑫磊 发表于 2023-5-6 20:40
问候红影晚上好！
问好焱鑫磊，晚上好{:4_187:} 小辣椒 发表于 2023-5-6 21:02
欣赏焱鑫磊精彩制作
这个背景效果有点晃眼睛
问候小辣椒晚上好！{:4_187:} 暂停后的那个变化图案更好看。 焱鑫磊 发表于 2023-5-6 21:22
问候小辣椒晚上好！
焱鑫磊晚上好，谢谢分享精彩的制作{:4_171:} 竹溪 发表于 2023-5-6 21:28
暂停后的那个变化图案更好看。
竹溪晚上好！{:4_187:} 焱鑫磊 发表于 2023-5-6 22:01
竹溪晚上好！
晚上好，你的签名很漂亮。 背景很美的，闪得好快，有点晃眼{:4_173:} 醉美水芙蓉 发表于 2023-5-7 00:28
欣赏朋友佳作！
问好朋友好！{:4_187:} 樵歌 发表于 2023-5-7 06:25
背景很美的，闪得好快，有点晃眼
问候朋友好！{:4_187:}{:4_204:} 焱鑫磊 发表于 2023-5-7 08:18
问候朋友好！
不客气的{:4_190:}
页:
[1]