午老虎 发表于 2022-11-25 22:53

女人有苦男人不易

<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:50px; 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://url.amp3a.com/kuwo.php/79991281.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 =`女人有苦男人不易 (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 = 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>


http://pan.yinhuabbs.cn/view.php/76a779b7be8861732953cd4b371b9792.html

蓝魔 发表于 2022-11-25 23:10

欣赏一下，谢谢。

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

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

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

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

谢谢老师的欣赏和鼓励

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

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

谢谢老师的欣赏和鼓励
页: [1]
查看完整版本: 女人有苦男人不易