学习代码音画《想你是我最美的享受》

老谟深虑 发表于 2023-1-24 09:27

<br /><br />
<div style="z-index: 27;width: 1000px; height: 600px; margin-top:30px; margin-left:-180px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #6C3365; overflow: hidden;transform:rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215105035713226.gif)0 0/100%100%; text-align: center;">
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgp9VP.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgpCUf.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgpP58.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgpSbt.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgSzDI.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgpFPS.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgp9VP.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/22/xgpCUf.jpg" alt="" />

<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=93311116&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(0.6);position: absolute;top:-500px; left:700px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 200px; height: 200px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/100%100%,url(https://s1.ax1x.com/2022/10/22/xgp9VP.jpg)-30px 0px/170% 100%;position: absolute;top:130px; left:-950px;z-index: 20;border-radius:50%;border:25px solid #800000; box-shadow: 0px 0px 2px 0.2px #eeeeee, 0px 0px 0px 45px #800000, 0px 0px 5px 46px #eeeeee"></div><P id="picBtn" class=""style="width: 400px; height: 400px;position: absolute;top:0px; left:-950px;background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png') 0 0/100% 100%;z-index: 20;"></p></div>

<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>
</div>

<style type="text/css">
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:0px; left:0px;
filter:hue-rotate(0deg)contrast(120%)brightness(100%);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 0;clip-path: polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);

-webkit-transform:translate(0%,0%)scale(1);}
2% {
opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);

-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);

-webkit-transform:translate(0%,0%)scale(2);}
}

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 >
<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:-30px; left:80px;
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: 0px;
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;
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.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(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)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 = 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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%";
})

</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>

庶民来了 发表于 2023-1-24 10:43

我的亲老乡，生活奔小康，制作兔明媚，看了心亮堂。

老谟深虑 发表于 2023-1-24 10:45

庶民来了发表于 2023-1-24 10:43
我的亲老乡，生活奔小康，制作兔明媚，看了心亮堂。

我的老乡，初三好！谢谢你的首席收看和精彩点评！

庶民来了 发表于 2023-1-24 11:34

老谟深虑发表于 2023-1-24 10:45
我的老乡，初三好！谢谢你的首席收看和精彩点评！

您的作品都这样精彩，越来越美好。

海笑发表于 2023-1-24 14:26

欣赏老师佳作！

老谟深虑 发表于 2023-1-24 17:54

庶民来了发表于 2023-1-24 11:34
您的作品都这样精彩，越来越美好。

老乡谬赞了，还得努力！

老谟深虑 发表于 2023-1-24 17:56

海笑发表于 2023-1-24 14:26
欣赏老师佳作！

谢谢海笑老师的欣赏，问候！

页: [1]

花潮论坛's Archiver

学习代码音画《想你是我最美的享受》