论坛 › 【代码图腾】 › 爱情错觉

午老虎 发表于 2022-11-26 21:06

爱情错觉

<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://www.yinhuabbs.cn/data/attachment/forum/202207/31/201908bmgs288z2oatp92e.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://www.yinhuabbs.cn/data/attachment/forum/202207/31/201405et8jwtvai8jtt0fw.jpg" style="width: 100%; height: 100%;"

/></div>
<div class="square0"><img alt="" src="http://www.yinhuabbs.cn/data/attachment/forum/202207/31/201407kjnbahbjb6d9euqh.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="http://www.yinhuabbs.cn/data/attachment/forum/202207/31/201406jvfvkvfvnvqthmqn.jpg"

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

<audio autoplay=""id="MusicPlayer"src="http://mp3.9ku.com/mp3/214/213384.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>

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

欣赏一下，谢谢。

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

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

午老虎 发表于 2022-11-27 13:45

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

谢谢老师了

午老虎 发表于 2022-11-27 13:45

谢谢老师的欣赏和鼓励

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

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

谢谢老师的欣赏和鼓励

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

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

谢谢老师的欣赏和鼓励

查看完整版本: 爱情错觉