论坛 › 【代码图腾】 › 守着回忆哭

午老虎 发表于 2022-11-23 22:06

守着回忆哭

<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://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=https://www.qqmc.com/up/kwlink.php?id=156606937.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-23 23:10

这个做的漂亮。

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

欣赏楼主的新作，点赞好听

查看完整版本: 守着回忆哭