你说女人容易吗 - 【代码图腾】 - 中画网 - Powered by Discuz! Archiver

论坛 › 【代码图腾】 › 你说女人容易吗

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

你说女人容易吗

<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:-100px; 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/7164005.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>

<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">        你说女人容易吗 - DJ版
</font><br />
<span style="color:#0000ff;">
<font face="隶书"><span style="font-

size:40px;">          午老虎欢迎你</span>
</font>
</span>

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

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

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

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

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

谢谢老师的欣赏和鼓励

页: [1]

查看完整版本: 你说女人容易吗