宁可错一回-门丽【焱鑫磊图片】

亚伦影音工作室 发表于 2023-9-21 17:02

本帖最后由亚伦影音工作室于 2023-9-21 20:44 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
width: 1164px;
height: 620px;
background: url('https://pic.imgdb.cn/item/64ea4445661c6c8e545c6ff9.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%; opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 20%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);opacity: 0;}
#papa:hover #mb { display:block ;opacity: 1;}
.photo {width: 300px;
height: 300px;
position: absolute;z-index: 1;
top:10%; left:0px;
opacity: 0;
animation: round 48s linear infinite;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1)translate(280%,80%);filter:hue-rotate(0deg);
opacity:1}

40% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);filter:hue-rotate(360deg);
opacity:1}
41% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,-60%);filter:hue-rotate(0deg);
opacity:0}

}
.photo:nth-child(1) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/6503c80f661c6c8e54542323.png') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/6503c7f5661c6c8e54541f4c.png') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/6503c7dc661c6c8e5454189d.png') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/6503c7c1661c6c8e54541472.png') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/6503c7a1661c6c8e54540c9d.png') no-repeat center/cover;}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#mplayer {position: absolute; left: 0%;top:90%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 0;}

#papa:hover #mplayer { display:block ;opacity: 1;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(92% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}
#tx { position: absolute;
top: 0px;
left: 0px;z-index: 2;
width: 100%;
height: 100%;
animation: tx 2s linear infinite;
cursor: pointer;
}

@keyframes tx {from {filter: hue-rotate(0deg);
}
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}
</style>

<div id="papa">

<span id="fullscreen">全屏</span>
<div id="mb"></div>
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>

<divid="mplayer"><audiostyle="width:100%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music302075266.mp3" type="audio/mpeg"></audio></div>
<divclass="lrc" >
   <div id="tx"><ul id="ullrc">
      </ul></div>
</div>
</div>

<style type="text/css">
.lrc{z-index: 20;
width: 100%;
height: 120px;
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:76%; left:0%;
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: 40px;
color: #ff0000;}
</style>
<script >
var lrc = `宁可错一回-门丽
词：陈红卫
曲：王帅
编曲：王亚东
混音：王亚东
吉他：杨春
和声：小佑
制作人：花僮
出品人：花僮
OP: 新创焦桐文化
也许是我大意没有防备
让你逮住机会撞开心扉
从此我一颗心彻夜不归
只想要随你远走高飞
也许是你能说会道的嘴
让我沉迷其中迈不动腿
于是我不再想是错是对
只要能和你相依相偎
我宁可真真切切错一回
也要轰轰烈烈爱一回
感情的事情哪有那么完美
彼此用心爱过就无悔
我宁可真真切切错一回
也要痛痛快快爱一回
纵然到最后伤得支离破碎
至少还有回忆把我陪
也许是你能说会道的嘴
让我沉迷其中迈不动腿
于是我不再想是错是对
只要能和你相依相偎
我宁可真真切切错一回
也要轰轰烈烈爱一回
感情的事情哪有那么完美
彼此用心爱过就无悔
我宁可真真切切错一回
也要痛痛快快爱一回
纵然到最后伤得支离破碎
至少还有回忆把我陪
我宁可真真切切错一回
也要轰轰烈烈爱一回
感情的事情哪有那么完美
彼此用心爱过就无悔
我宁可真真切切错一回
也要痛痛快快爱一回
纵然到最后伤得支离破碎
至少还有回忆把我陪
`;
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;

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
            fs = !fs;
   };
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? image.classList.add('stop'): image.classList.remove('stop');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script>

焱鑫磊 发表于 2023-9-21 17:27

好制作！{:4_187:}

红影发表于 2023-9-21 19:39

这些飘移的透明图的制作真漂亮，还弄成了变色效果。欣赏亚伦老师好帖{:4_199:}

红影发表于 2023-9-21 19:40

这个还能一键全控。很赞{:4_187:}

页: [1]

花潮论坛's Archiver

宁可错一回-门丽【焱鑫磊图片】