论坛 › 【代码图腾】 › 幸福爱河

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

幸福爱河

<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://up.yinhuabbs.cn/upload/%E8%80%81%E7%9C%BC%E7%9C%8B%E7%AA%97%E5%A4%96/231036vr49or9hcqdipdkp_jpg_thumb.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://pan.yinhuabbs.cn/view.php/2ca4fbdf745a24872f496ed9110efccb.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/cedc1e8f1f8e3488cadafcec91ade2ff.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/6f8329b18722c4537fa15b791c90588c.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/9a4b8bcd002ae1805be0b36ed3c0e2cb.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/11217710c0f2e497bcbb1b32b6e5f942.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/2e5fc2a1513b9d4eca62cc36e0325a6a.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/fddd66c865fab99390c81124f3abb2f0.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/11217710c0f2e497bcbb1b32b6e5f942.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=http://url.amp3a.com/kuwo.php/23490450.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 = `幸福爱河DJ何鹏/陈咏/郭玲
清澈的小河静静流淌
晚风吹拂夕阳
在我心中最美的姑娘
她就在河对岸
每当我走过她的身旁
总忍不住回头望
谁知道姑娘她羞红了脸
像花儿般朵朵开放
哥哥你这是为何
每天从我的门前过
可是你话也不说
就这样看着我
四季花含苞未开
只为等到哥哥你来
可是你总在门外
谁让你总在徘徊
思念地歌儿悠悠的唱
想飞到姑娘心上
就算是经过重重阻挡
我也决不退让
可是我不知道你怎么想
这让我感到迷茫
姑娘你能否告诉我
爱上你我该怎么办
哥哥你听我说
妹妹的话不多
你要是真的爱我
那就千万别错过
四季花为你盛开
就等着你来灌溉
有一朵开在门外
那是我在为你等待
蓝蓝地天呀绿绿地水
风景是特别的美
可是我依然觉得姑娘
你才能让我沉醉
只要你今生无怨无悔
天荒地老我也把你陪
让我们享受着爱的滋味
生生世世永相随
让我们今生相约
我就是你的一切
曾经日夜的思念
现在你就在眼前
牵着那哥哥的手
天涯海角一起走
有你陪伴在左右
幸福快乐到永久
让我们今生相约
我就是你的一切
曾经日夜的思念
现在你就在眼前
牵着那哥哥的手
天涯海角一起走
有你陪伴在左右
幸福快乐到永久
有你陪伴在左右
那是我们最幸福的时候
`;
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:47

谢谢分享

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

非常开心 发表于 2022-11-24 19:47
谢谢分享

谢谢老师的欣赏和鼓励

查看完整版本: 幸福爱河