眼中有泪心中有你 - 李乐乐 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2022-7-8 13:44

眼中有泪心中有你 - 李乐乐

本帖最后由亚伦影音工作室于 2022-7-8 16:35 编辑 <br /><br /><style type="text/css">/特效图片部分/
.demo{padding: 0em 0}
.product-grid{
   font-family: 'Roboto', sans-serif;
   position: relative;margin-top:0px; margin-left:0px;width: 1000PX;background-size: 100% 100%;background: linear-gradient(70deg, #ee7752, #ff0000, #23a6d5, #fff000);}
.product-grid .product-image{
   -webkit-mask-image: radial-gradient(black 40% ,transparent 100%);opacity: 1.0;
               width: 1000px;
   height: 600px;
}
.product-image .pic-1{
   width: 1000PX;
   height: 600PX;
opacity: 1;
   backface-visibility: hidden;
   transition: all 0.4s ease-out 0s;
}
.product-grid:hover .product-image .pic-1{ opacity: 0; }
.product-image .pic-2{
   width: 100%;
   height: 100%;
   opacity: 0;
   backface-visibility: hidden;
   transform: scale(3);
   position: absolute;
   top: 0;
   left: 0;
   transition: all 0.4s ease-out 0s;
}

.product-grid:hover .product-image .pic-2 {
   opacity: 1;
               transform: scale(1);
}

</style>
<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-150px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(http://data.mvbox.cn/album/22/03/06/22030614333835236148.jpg); text-align: center;">
<div class="demo">
<div class="product-grid">
<div class="product-image"><img class="pic-1" src="http://pan.yinhuabbs.cn/view.php/15aebec9cc79df88a93dd1fdea9f3539.jpg" /> <img class="pic-2" src="http://pan.yinhuabbs.cn/view.php/ea621413b9961140761c04bbf79f4fc6.jpg" /></div>
</div>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=225631071&.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: 300;position: absolute;top:-400px; left:40px;"></span>
   <span id="bf"onclick="rbf();"></span>
   </div>
<div class="items1" >
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;" ></div></div>
<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>
</div>
</div>
<script >var 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 = 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>
<style type="text/css">
.container{width: 0px;height: 0px;
margin: 0;position: absolute;top:500px; left:-0px;z-index: 100;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0;
}
.container .lrc{
width: 660px;
height: 180px;z-index: 1;
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:-100px; left:400px;
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:-400px; left:80px;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.2);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.2);}
}
.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>

走过岁月 发表于 2022-7-8 13:51

漂亮，右边是歌词吗

红影发表于 2022-7-8 13:55

鼠标滑过，就会换个美人了。欣赏亚伦老师精彩制作{:4_187:}

页: [1]

花潮论坛's Archiver

眼中有泪心中有你 - 李乐乐