论坛 › 【代码图腾】 › 又见山里红

午老虎 发表于 2022-11-23 23:49

又见山里红

<div class="t_fsz">
<div style="z-index: 127;width: 1000px; height: 620px; margin-top:30px; margin-left:-30px;box-shadow: 0px 0px 0px 2px #cccccc,
0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url
(http://pan.yinhuabbs.cn/view.php/6f8329b18722c4537fa15b791c90588c.jpg)0 0/40% 50%,url

(http://tuku.link/imgs/2022/07/95a9798fd03648ba.png)0 0/100% 100%; text-align: center;">
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165859miipcwow7ziee279.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165901m2g0wh0rgxgqlshp.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165858sikekm2qa2jvev92.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165901mp0owx0oxox0ssrs.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165901m2g0wh0rgxgqlshp.jpg" alt="" />
<img class='photo'src="http://www.yinhuabbs.cn/data/attachment/album/202209/13/165902zgzggpc74wg9g6gg.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://music.163.com/song/media/outer/url?id=1875502264.mp3" controls loop
style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png"
id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></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: 1;clip-path:circle(33% at 0% 30%);
-webkit-transform:translate(0%,0%)scale(1);}

8% {
opacity: 1;clip-path:circle(33% at 50% 50%);
-webkit-transform:translate(0%,0%)}
10% {
opacity: 1;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 0;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
}
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: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: 960px;
    height: 120px;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:-10px; 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: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;
    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:1100px;height:620px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1100px; height: 620px;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 0.5s linear infinite;}
@keyframes rotating {
0%{opacity: 1;background: linear-gradient(0deg, rgba(251, 81, 81, 0.33) 13%,rgba(106, 80, 240, 0.07) 47%,rgba(65, 185, 41, 0.42)

85%);}
50% {opacity: 1;background: linear-gradient(45deg, rgba(114, 251, 81, 0.33) 13%,rgba(240, 184, 80, 0.05) 47%,rgba(185, 41, 45,

0.42) 87%);}
100%{opacity: 1;background: linear-gradient(90deg, rgba(251, 81, 81, 0.33) 13%,rgba(80, 240, 215, 0.11) 47%,rgba(26, 77, 251,

0.42) 87%);}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)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 = 70, lrc_ul_height = 50;
    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>
         var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById

("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById

("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

非常开心 发表于 2022-11-24 19:48

欣赏楼主的新作

午老虎 发表于 2022-12-5 17:26

非常开心 发表于 2022-11-24 19:48
欣赏楼主的新作

谢谢老师的欣赏和鼓励

查看完整版本: 又见山里红