想你的心好苦 (DJ版) - 王爱华【代码复杂谨慎模仿】
本帖最后由 亚伦影音工作室 于 2022-7-10 16:00 编辑 <br /><br /><style>.papa { left: -222px; width: 1100px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://img-baofun.zhhainiao.com/fs/74ae5187f92e2a7500c446935b0728d4.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 50%; height: 100%;background:tan url(http://pan.yinhuabbs.cn/view.php/f84378241ad062b12a22896da4641ba4.jpg)no-repeat center/cover; transition: all 2s linear;z-index: 500;transform: translate(0%,0%) rotateY(0deg); }
.papa::before { transform: rotateY(0deg); }
.papa::after { left: 50%; transform: rotateY(180deg); }
.papa:hover::before { transform: translate(-100%,0%) rotate(0deg); }
.papa:hover::after { transform: translate(100%,0%) rotateY(-180deg); }
</style>
<style type="text/css">
.photo {width: 1100px;
height: 620px;
position: absolute;top:0px; left:0px;z-index: 450;
transform: scale3d(0,0,-100) skew(0,60deg)scale(.5);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {
5% {opacity: 1;}
12% {opacity: 1;transform:scale(1)}
18% {opacity: 0;transform:scale(3)}
}
img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) { animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style>
<div class="items1"><div class="papa"><div ><img class='photo'src="http://pan.yinhuabbs.cn/view.php/22f16987bee0076df7224a08eab5106c.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/5702c7dfb5d8e06ddae5b89856ec1505.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/fab29a57fdfbbb4d6efae0e1bd52c544.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/44e3037872f82bfe8de3b8066d64c777.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/0ffa7ca02b8fccfe832fbd5a2e2bf808.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/b86e18cf32d4b830c3e6789f14feba19.jpg" alt="" /></div></div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=207531113&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="btn">
<span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:-60px;"></span>
<span id="bf"onclick="rbf();"></span>
</div>
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></div>
<div class="items" >
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 550;
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:-70px; left:0px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 30px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:-60px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.audio{
z-index: 1;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
opacity: 0;
}
</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>
<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(180deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</style>
<script >var lrc = `想你的心好苦 (DJ版) - 王爱华
词：轻云望月
曲：轻云望月
DJ：月之歌音乐室
混音：Y爱华
出品：月之歌文化传媒
（版权所有 未经许可 请勿使用）
天还是那片天
城还是那座城
为何在我的眼里却越变越陌生
没有你的日子就连空气都变冷
沉寂的房间只有孤独的心跳动
月还是那轮月
风还是那么轻
只是我身边的位置不见你踪影
习惯了听你的情话和你的笑声
如今只有我一个人独望满天星
我想你的心好苦念你的心好疼
不知何时还能把你拥入我怀中
虽然也知道你我已真的不可能
还是时常幻想某天有奇迹发生
我想你的心好苦念你的心好疼
难道我们无法白头是命中注定
求只求来世和你还能够再相逢
让我们好好补偿今生欠下的情
月还是那轮月
风还是那么轻
只是我身边的位置不见你踪影
习惯了听你的情话和你的笑声
如今只有我一个人独望满天星
我想你的心好苦念你的心好疼
不知何时还能把你拥入我怀中
虽然也知道你我已真的不可能
还是时常幻想某天有奇迹发生
我想你的心好苦念你的心好疼
难道我们无法白头是命中注定
求只求来世和你还能够再相逢
让我们好好补偿今生欠下的情
让我们好好补偿今生欠下的情`;
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 = 90;
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 rbf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="";
}
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_199:}
页:
[1]