酒醉的蝴蝶

也曾年轻 · 发表于 2026-1-18 10:00

本帖最后由也曾年轻于 2026-1-18 10:14 编辑

<meta charset="UTF-8">
<style type="text/css">
.itemm {
z-index: 1;
width: 800px;
height: 470px;
position: absolute;
box-shadow: 0px 0px 0px 2px #CCCCCC, 0px 0px 0px 4px #222222;
left: 115px;
top: 90px;
box-sizing: border-box;
background: url(http://)0 0/100% 100%, linear-gradient(0deg, #000080, #003300, #880000, #000000);
overflow: hidden;
border-radius: 0%;
transform-origin: center;
}
.photo {
width: 800px;
height: 470px;
position: absolute;
top: 0px;
left: 0px;
filter: contrast(130%)brightness(100%);
animation: round 48s infinite var(--aniPlayState);
opacity: 0;
}
@keyframes round {
1% {
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%);
transform: translate(0%, 0%)scale(1);
}
3% {
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%);
transform: translate(0%, 0%)scale(1);
}
8% {
opacity: 1;
clip-path: polygon(0 0, 0 100%, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0, 50% 50%, 100% 0, 0 0, 50% 50%);
transform: translate(0%, 0%)scale(1);
}
32% {
opacity: 0;
clip-path: polygon(0 0, 0 100%, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0, 50% 50%, 100% 0, 0 0, 50% 50%);
transform: scale(1.52)
}
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(7) {
animation-delay: 36s;
}
img:nth-child(6) {
animation-delay: 30s;
}
img:nth-child(5) {
animation-delay: 24s;
}
img:nth-child(4) {
animation-delay: 18s;
}
img:nth-child(3) {
animation-delay: 12s;
}
img:nth-child(2) {
animation-delay: 6s;
}
#MusicPlayer {
width: 250px;
display: block;
margin: 0 auto;
}
.lrc {
width: 900px;
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 -1px 0);
display: block;
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: 70px;
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;
font-weight: bold;
}
#aplay {
border: 2px solid #000000;
border-radius: 50%;
}
.z360z {
animation: rotating 10s linear infinite;
}
@keyframes rotating {
0% {
transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);
}
100% {
transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);
}
}
.items {
animation: slider 0.26s linear infinite var(--aniPlayState);
position:absolute; z-index: 20;width:80%; height: 80px;position: absolute; top:68%; left:10%;
}
@keyframes slider {
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%);
}
}
#pBlk {z-index: 5;width: 1010px; height:715px;position: relative; margin:30px auto 30px calc(50% - 586px); overflow: hidden;transform: rotate(0deg);
background: url(https://upfile.mp3.wf/view.php/fbdd8cfccb8fd6326fdeb5c555163611.png)0 0/100% 100%; text-align: center;--aniPlayState:paused;}
#aplay{width:80px; height: 80px;position: absolute;bottom:150px; left:150px; z-index: 100;transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg); animation: rotating 10s linear infinite var(--aniPlayState)}
</style>
<div id="pBlk">
<div class="itemm">
<img class='photo' src="https://upfile.mp3.wf/view.php/3033cf8d319baa6c0f475f327ff43b8d.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/3ef57d3e1c49fd76b6942b491a9fc193.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/fc3dd03402b527e686e76fb558c8110d.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/89512a17fb7d6a5294bf0da0bd0e0623.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/d01de7a82dbd4be803a4d4940e1db0fc.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/624a859ac09f633a7708c11d6ac2e7d7.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/abdf85f0a930ea7cbeafeca9946d60f1.jpg" alt="" />
<img class='photo' src="https://upfile.mp3.wf/view.php/05955ceaf27f77caae8e31cfef8e229d.jpg" alt="" />
</div>
<audio id="MusicPlayer" src="https://upfile.mp3.wf/view.php/a48ff817e05311f2c1e5de6c63409990.mp3" loop autoplay ></audio>
<img src="https://pic.imgdb.cn/item/675314fcd0e0a243d4df0160.png" id="aplay" style="">
<div class="items">
<div class="lrc" >
<ul id="ullrc"></ul>
</div>
</div>
</div>
<script>
var lrc = `[00:01.15]《酒醉的蝴蝶》
[00:03.43]演唱：孙艺珙
[00:08.44]LRC编辑：梦江南
[00:21.07]怎么也飞不出
[00:23.54]花花的世界
[00:26.06]原来我是一只
[00:28.53]酒醉的蝴蝶
[00:30.93]你的那一句誓约
[00:33.28]来的轻描又淡写
[00:35.82]却要换我这一生
[00:38.27]再也解不开的结
[00:41.17]春去镜前花
[00:43.70]秋来水中月
[00:45.92]原来我就是那一只
[00:48.70]酒醉的蝴蝶
[00:51.29]花开花时节
[00:53.75]月落月圆缺
[00:56.16]原来我就是那一只
[00:58.82]酒醉的蝴蝶
[01:01.54]***********
[01:21.41]怎么也飞不出
[01:23.87]花花的世界
[01:26.40]原来我是一只
[01:28.99]酒醉的蝴蝶
[01:31.09]你的那一句誓约
[01:33.69]来的轻描又淡写
[01:36.14]却要换我这一生
[01:38.68]再也解不开的结
[01:41.52]春去镜前花
[01:44.05]秋来水中月
[01:46.34]原来我就是那一只
[01:49.05]酒醉的蝴蝶
[01:51.52]花开花时节
[01:54.11]月落月圆缺
[01:56.45]原来我就是那一只
[01:59.10]酒醉的蝴蝶`;
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
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[index].words;
ullrc.appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70,
lrc_ul_height = 50;
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[index].classList.add("active");
}
var turn = 0;
function getLrcIndex() {
var time = MusicPlayer.currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
MusicPlayer.ontimeupdate = setPosition;
let aniPlayStatus = () => {
if (MusicPlayer.paused) pBlk.style.setProperty('--aniPlayState', 'paused');
else pBlk.style.setProperty('--aniPlayState', 'running');
}
aplay.onclick = () => {
if (MusicPlayer.paused) {
MusicPlayer.play(); //MusicPlayer.play();
pBlk.style.setProperty('--aniPlayState', 'running');
} else {
MusicPlayer.pause();
pBlk.style.setProperty('--aniPlayState', 'paused');
}
}
//MusicPlayer.onplay = MusicPlayer.onpause = aniPlayStatus();
MusicPlayer.addEventListener('play', () => aniPlayStatus());
MusicPlayer.addEventListener('pause', () => aniPlayStatus());
MusicPlayer.play().catch(_ = () => aniPlayStatus());
</script>