崔伟立-人生咋就这么难

亚伦影音工作室 发表于 2022-11-18 05:22

本帖最后由亚伦影音工作室于 2022-11-18 05:28 编辑 <br /><br /><style>
.container {width: 427px; height: 294px;box-shadow: 0px 0px 0px 1px #eeeeee, 0px 0px 0px 8px #800000;position: absolute;top:210px; left:450px;transform: skew(2.75deg)rotate(1.12deg);background:linear-gradient(180deg, rgba(255, 224, 0, 0.45) 0%,rgba(5, 246, 93, 0.41) 25%,rgba(1, 50, 251, 0.29) 47%,rgba(243, 5, 5, 0.45) 85%),url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/57649b733bf6dce53aceb413063611a1.jpg)0 0/100%100%;opacity: .9;border-radius:0.01%;overflow: hidden;}
.photo {width: 100%; height: 100%;
position: absolute;
top:0px; left:0px;filter:contrast(140%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 32s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}

@keyframes round {0% {
opacity: 1;clip-path: polygon(0 0, 0 0, 50% 50%, 0 100%, 0 100%, 50% 50%, 100% 100%, 100% 100%, 50% 50%, 100% 0, 100% 0, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
-webkit-transform:translate(0%,0%)scale(1);}
8% {
opacity: 1;clip-path: polygon(65% 0, 38% 0, 38% 30%, 0 30%, 0 70%, 38% 70%, 38% 100%, 65% 100%, 65% 71%, 100% 70%, 100% 30%, 65% 30%);
-webkit-transform:translate(0%,0%)scale(1);}
12% {
opacity: 1;clip-path: polygon(100% 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0, 100% 0);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 0;clip-path: polygon(100% 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0, 100% 0);
-webkit-transform:translate(0%,0%)scale(1);}
}

img:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f2a53a1e6e81b4cd7c41058d2ebd578d.jpg)0 0/100% 100%;
animation-delay: 28s;
}
img:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d386798031aea2db88aea1629093d931.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f33b03bf78ea6b69b25f54f084c39882.jpg)0 0/100% 100%;
animation-delay: 20s;
}
img:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3b639b214d31fe83a6f5ffb0e28d7644.jpg)0 0/100% 100%;
animation-delay: 16s;
}
img:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5086f787b8d9a4e21c52441b9f2072af.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(6) {background:url(https://img-baofun.zhhainiao.com/fs/81852510139ab7a23056d03c358b547c.jpg)0 0/100% 100%;
animation-delay: 8s;
}
img:nth-child(7) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b2477df1e9ace98a0fd72d00553397ca.jpg)0 0/100% 100%;
animation-delay: 4s;
}
img:nth-child(8) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f702ba82a1b2fc37da9974e38a90c6a8.jpg)0 0/100% 100%;
animation-delay: 0s;
}

.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://www.kumeiwp.com/sub/filestores/2022/11/17/6ad4e5a1f987bc7a215248798669dca0.png)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"id="testImg"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div></div>

<div class="img_border" id="aplay" style="width: 1024px; height: 600px;position: absolute;top:0px; left:0px;"></div>

<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music249989451.mp3" loop="" ></audio>

<div class="btn">
<div id="testImg" onclick="bf()">
<inputtype="button" id="testBtn" value="暂停"style="width: 80px; height: 40px;border-radius: 0%;font-size:20px;font-weight:bold;border:1px solid #000000;-webkit-background-clip : text;"></input ></div></div>

<div class="lrc">
<ul class="texiao"id="ullrc">
      </ul>
   </div>
</div>
</div>

<style type="text/css">
.HT{
width: 400px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.btn{
display: block;z-index: 300;opacity: 0.8;
margin: 0px 0px;position: absolute;top:520px; left:20px;
}

.lrc{
width: 870px;
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:450px; left:250px;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: 30px;
color: #ff0000;transform:perspective(500px) rotateZ(2deg)rotateX(2deg)scale(1);

}

/*dyj动画*/
.img_border{display:inline-block;width:1024px;height:600px;margin:0px ;position: absolute;top:-500px; left:0px;}
.img_border #aplay{border:12px solid #000000;border-radius:0%; }
.z360z{animation: rotating 40s linear infinite;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313512556895204.gif)0 0/50%50%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/50%50%,url(https://www.kumeiwp.com/sub/filestores/2022/11/17/229576e66c6da323cbd5ae915ecc4847.gif)0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}
to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>

<style>
/*整体特效*/
.texiao{margin: 0px auto;position: absolute;top:0px; left:0px;z-index:10;
display: block;
width: 1024px; height: 600px;animation:rotat 1s 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 =`崔伟立-人生咋就这么难

作词：张世东/崔伟立
作曲：崔伟立
编曲：冯丹
伴唱：凌菲
二胡：邓奇奇
混音：苏洲
制作人：崔伟立

望一眼从前
人生过半
我如人海漂泊的小船
走南闯北
露宿风餐
前行脚步从不敢放慢

一年又一年
举步维艰
脊背早已被现实压弯
苦辣酸咸
翻涌心间
每个夜晚都与烟酒为伴

这人生为啥这么难
无人听我滴血的心酸
风风雨雨
沟沟坎坎
咬紧牙关挺过每一天

这人生咋就这么难
只能自己把自己可怜
跌跌撞撞
兜兜转转
自己的路跪着也要走完

一年又一年
举步维艰
脊背早已被现实压弯
苦辣酸咸
翻涌心间
每个夜晚都与烟酒为伴

这人生为啥这么难
无人听我滴血的心酸
风风雨雨
沟沟坎坎
咬紧牙关挺过每一天

这人生咋就这么难
只能自己把自己可怜
跌跌撞撞
兜兜转转
自己的路跪着也要走完

这人生为啥这么难
无人听我滴血的心酸
风风雨雨
沟沟坎坎
咬紧牙关挺过每一天

这人生咋就这么难
只能自己把自己可怜
跌跌撞撞
兜兜转转
自己的路跪着也要走完
自己的路跪着也要走完`;
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>

红影发表于 2022-11-18 12:17

在一定区域内的图片轮播和背景变色，这个不容易。欣赏亚伦老师漂亮的帖子{:4_199:}

页: [1]

花潮论坛's Archiver

崔伟立-人生咋就这么难