论坛 › 【代码图腾】 › 伤心话留到明天再说

午老虎 发表于 2022-11-26 20:46

伤心话留到明天再说

<div style="z-index: 127;width: 1024px; height: 600px; margin-top:-20px; margin-left:-30px;box-shadow: 0px 0px 0px 2px #ffffff,

0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://www.yinhuabbs.cn/data/attachment/forum/201911/16/171734owjzj888v88yjvz7.jpg)0 0/100%100%,linear-gradient(50deg, #000080,

#ff0000, #000000, #00f000);text-align: center;">
<style>
.container {
margin: 0px auto;
width: 1024px;
height: 600px;
overflow: hidden;
position: relative;
}
.square
{top: 0px;
left:0px;
position: absolute;border-radius:0%;
width: 340px;border:2px solid #ffffff;
height: 600px;}
.square:nth-child(1)
{animation:change1 20s ease infinite;}

.stop :nth-child(1) {
animation-play-state: paused;
}
.square:nth-child(2)
{animation:change2 20s ease infinite;}
.stop :nth-child(2) {
animation-play-state: paused;
}
.square:nth-child(3)
{animation:change3 20s ease infinite;}
.stop :nth-child(3) {
animation-play-state: paused;
}


.container:hover .square
{top: 0px;
left:0px;
position: absolute;border-radius:0%;
width: 340px;border:2px solid #ffffff;
height: 600px;cursor: pointer;transition: 3s;opacity: 0;}



.square0
{top: 0px;
left:0px;
position: absolute;border-radius:0%;
width: 340px;border:2px solid #ffffff;
height: 600px;cursor: pointer;transition: 3s;opacity: 0;}

.container:hover .square0
{top: 0px;
left:0px;
position: absolute;border-radius:0%;
width: 340px;border:2px solid #ffffff;
height: 600px;cursor: pointer;transition: 3s;opacity: 1;}

.square0:nth-child(4) {animation:change4 20s ease infinite;
}

.square0:nth-child(5) {animation:change5 20s ease infinite;
}

.square0:nth-child(6) {
animation:change6 20s ease infinite;
}






@keyframes change1
{0%{ transform: translate(0%,-150%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(0%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(0%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
@keyframes change2
{0%{ transform: translate(100%,-450%)scale(1,1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { background:red;transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { background:red;transform: translate(100%,0%)scale(1.15,1)rotateX(-45deg)rotateY(20deg);}
75% { transform: translate(100%,0%)scale(1.15,1)rotateX(45deg)rotateY(20deg);}
80% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90%{ transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
@keyframes change3
{0%{ transform: translate(200%,-850%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(200%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(200%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
@keyframes change4
{0%{ transform: translate(0%,-150%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(0%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(0%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
@keyframes change5
{0%{ transform: translate(100%,-450%)scale(1,1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { background:red;transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { background:red;transform: translate(100%,0%)scale(1.15,1)rotateX(-45deg)rotateY(20deg);}
75% { transform: translate(100%,0%)scale(1.15,1)rotateX(45deg)rotateY(20deg);}
80% { transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90%{ transform: translate(100%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
@keyframes change6
{0%{ transform: translate(200%,-850%)scale(1)rotateX(0deg)rotateY(0deg);}
10% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
20% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
30% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
40% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(20deg);}
50% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg)rotateZ(-20deg);}
60% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(0deg);}
70% { transform: translate(200%,0%)scale(1,1)rotateX(45deg)rotateY(20deg);}
75% { transform: translate(200%,0%)scale(1,1)rotateX(-45deg)rotateY(20deg);}
80% { transform: translate(200%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
90% { transform: translate(0%,0%)scale(1,1)rotateX(0deg)rotateY(180deg);}
110%{}
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:-20px; margin-left:-30px;box-shadow: 0px 0px 0px 2px #ffffff,

0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-

baofun.zhhainiao.com/pcwallpaper_ugc/static/46692fec5f3aba1fbceb98adb40de038.jpg)0 0/100%100%,linear-gradient(50deg, #000080,

#ff0000, #000000, #00f000);text-align: center;">
<div class="HT">
<div class="texiao"id="testImg"style="width: 1024px; height: 600px;position: absolute;top:0px; left:0px;"><div

class="container"><div class="square"id="testImg"><img alt=""

src="http://pan.yinhuabbs.cn/view.php/3b3edf02fc8a69354b0e63c19b0d5b59.jpg" style="width: 100%; height: 100%;" /></div>

<div class="square"id="testImg"><img alt="" src="http://pan.yinhuabbs.cn/view.php/57c6e311aacb80a15ad1e38cca349ec3.jpg"

style="width: 100%; height: 100%;" /></div>

<div class="square"id="testImg"><img alt="" src="http://pan.yinhuabbs.cn/view.php/c40096b968d67874f3cf28519724d79a.jpg"

style="width: 100%; height: 100%;" /></div>



<div class="square0"><img alt="" src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/dbbb88549fe165f35965bb4bed021732.jpg" style="width: 100%; height: 100%;"

/></div>

<div class="square0"><img alt="" src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/65f7ab3d7d7f178b42570d34eeb59820.jpg" style="width: 100%; height: 100%;"

/></div>

<div class="square0"><img alt="" src="https://img-

baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/908f89de9cd347b29530677e879e98bb.jpg" style="width: 100%; height: 100%;"

/></div></div></div>


<audio autoplay=""id="MusicPlayer"src="http://mp3.9ku.com/mp3/214/213378.mp3" loop="" ></audio>

<div class="btn">
<div   id="testImg" onclick="bf()">
<inputtype="button" id="testBtn" value="暂停"style="width: 80px; height: 40px;border-radius: 0%;color: #ffffff;font-

size:20px;font-weight:bold;border:1px solid #ffffff;-webkit-background-clip : text;"></input ></div></div>
<div class="img_border"id="aplay"style="width: 100%; height: 100%;position: absolute;top:0px; left:0px;z-index: 250;filter:hue-

rotate(160deg)">
<div class="lrc">
<ul id="ullrc">
         </ul>
      </div>
</div>
</div></div>
<script >
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
</script>
<style type="text/css">
.HT{
    width: 1024px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
    width: 980px;
    height: 140px;
    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:500px; left:60px;z-index: 30;
    margin: 0 auto;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}



/*歌词动画*/
.img_border{ width: 980px;height: 140px;position: absolute;top:0px; left:0px;z-index: 250;display: block;}
.img_border#aplay{ }
.z360z{animation:rotating 0.3s linear infinite;}
@keyframes rotating{0%{
                filter:hue-rotate(0deg)contrast(240%)brightness(100%);}
            50%{
                filter:hue-rotate(360deg)contrast(240%)brightness(200%);}
100%{
                filter:hue-rotate(0deg)contrast(140%)brightness(100%);}
}
</style>
/*整体特效*/
<style>
.texiao{margin: 0px auto;position: absolute;top:0px; left:0px;z-index:10;
    display: block;background:url(http://pan.yinhuabbs.cn/view.php/ee1f2925815538fb07ef4afd9fda49d8.png)0 0/20% 20%;
    width: 1024px; height: 600px;animation:rotat 2s linear infinite;}
.stop {
animation-play-state: paused;
}

@keyframes rotat{0%{
      background-position: 0% 0%;filter:hue-rotate(360deg);transform:rotate(0deg)scale(1);
    }
    100%{
      background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(0deg)scale(1);
    }
}

</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 = 70;
    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 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="";
                }
            }
      }
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
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>

<p style="text-align: ; margin-top: -570px; margin-left:-100px; height=300px; width=1300px;">
        <marquee behavior="alternate" scrollamount="0">
                <font color="#ff0000" face="隶书" size="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伤心话留到明天再说
                </font><br />
                <span style="color:#0000ff;">
<font face="隶书"><span style="font-size:40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;午老虎欢迎你</span>
                        </font>
                </span>


<p>&nbsp;</p>
</div>
</div>
<p>&nbsp;</p>
</div>
</div>
<p>&nbsp;</p>

蓝魔 发表于 2022-11-26 23:52

欣赏一下，谢谢。

非常开心 发表于 2022-11-27 11:46

欣赏收藏老师新作 好看又好听

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

蓝魔 发表于 2022-11-26 23:52
欣赏一下，谢谢。

谢谢老师的欣赏和鼓励

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

非常开心 发表于 2022-11-27 11:46
欣赏收藏老师新作 好看又好听

谢谢老师的欣赏和鼓励

查看完整版本: 伤心话留到明天再说