别太晚回家 - 黄灿 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-10-27 08:54

别太晚回家 - 黄灿

本帖最后由亚伦影音工作室于 2024-10-27 09:44 编辑 <br /><br /><style>
#picBlk {z-index: 3;
width: calc(4* var(--picWidth));
height: var(--picHeight);
position: absolute;
left: 0px;
animation: mleft 10s linear infinite;
}

#picBlk img {
width: var(--picWidth);
height: var(--picHeight);
float: left;
}

#oBlk {
width: 1286px;
height: var(--picHeight);
overflow: hidden;
position: relative;
margin: 210px -300px ;
box-shadow: 4px 4px 10px black;
--picWidth: 700px;
--picHeight:680px;
}

@keyframes mleft {
to {
   left: calc(-2* var(--picWidth));
}
}

#picBlk img:nth-child(even) {
transform: scaleX(-1);
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }

#pa{z-index: 1;
width: 104%;
height: 104%;
position: absolute;
top: -2px;
left: -2px;background:url(https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg)no-repeat center/cover;
filter: url(#water)
}
#dt{z-index: 2;
width: 100%;
height: 100%;
position: absolute;
top: 0px;mix-blend-mode: lighten;
left: 0px;
}
#dt img{height: 100%;width: 100%;}
.lrc{z-index: 10;
width: 90%;
height: 180px;
overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px0);
display: block;position: absolute;top:75%; left:5%;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
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: 44px;
color: #800080;
text-align: center;
}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div id="oBlk">
<div id="picBlk">
<img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
<img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
<img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
<img src="https://pic.imgdb.cn/item/671c82d4d29ded1a8cdf4d72.png">
</div>
<div id="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
<feTurbulence type="fractalNoise" baseFrequency=".03 .03" numOctaves="1" result="noise1"></feTurbulence>
<feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
   <animate attributeName="values" from="0" to="360" dur="3s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="7" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>
<div id="dt" ><imgid="Img" src="https://pic.imgdb.cn/item/659d4bdf871b83018aafa20f.gif"></div>
<divclass="lrc" >
   <div id="wzsd1"><ul id="ullrc">
   </ul>
   </div>
</div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/83/1c/32/054c0ba2c55b570a9d22bcbe30842db8/audio.mp3" autoplay loop></audio>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
</div>
<script>
mdiv.onclick = () => aud.paused ? (aud.play(),p.unpauseAnimations(),image.play()): (aud.pause(), p.pauseAnimations(),image.stop());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
picBlk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>picBlk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>picBlk.style.animationPlayState = 'paused');

/*歌词特效*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');

</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image= document.getElementById("Img");
</script>

<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 = 70, lrc_ul_height = 60;
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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}
$("aud").ontimeupdate = setPosition;
</script>

梦油发表于 2024-10-27 11:05

欣赏佳作，问候亚伦。

红影发表于 2024-10-27 12:00

这个和昨天那个的效果差不多，小播换掉了，换得和背景更加相符合。这个更漂亮{:4_199:}

红影发表于 2024-10-27 12:02

又是一键全控的。欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

别太晚回家 - 黄灿