酒醉的蝴蝶
本帖最后由 梦江南 于 2026-1-18 10:11 编辑 <br /><br /><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 infinitevar(--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 = `《酒醉的蝴蝶》
演唱：孙艺珙
LRC编辑：梦江南
怎么也飞不出
花花的世界
原来我是一只
酒醉的蝴蝶
你的那一句誓约
来的轻描又淡写
却要换我这一生
再也解不开的结
春去镜前花
秋来水中月
原来我就是那一只
酒醉的蝴蝶
花开花时节
月落月圆缺
原来我就是那一只
酒醉的蝴蝶
***********
怎么也飞不出
花花的世界
原来我是一只
酒醉的蝴蝶
你的那一句誓约
来的轻描又淡写
却要换我这一生
再也解不开的结
春去镜前花
秋来水中月
原来我就是那一只
酒醉的蝴蝶
花开花时节
月落月圆缺
原来我就是那一只
酒醉的蝴蝶`;
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 = 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.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;
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>
鸣谢小辣椒的代码和也曾年轻老师的帮助！{:4_187:}{:4_190:}{:4_180:} 阿姨你真棒！电视机外壳还重新抠图过，漂亮的制作，好听的歌曲，背景转换的图片也是特别的美{:4_199:} 发现阿姨的动手能力特别强{:4_178:} 小辣椒欣赏加学习，好佩服哦{:4_179:} 歌词真有意思，耐人寻味。 小辣椒 发表于 2026-1-17 21:14
阿姨你真棒！电视机外壳还重新抠图过，漂亮的制作，好听的歌曲，背景转换的图片也是特别的美
小辣椒，这电视机代码我很喜欢，你就把代码发给我，阿姨不要让你失望。是你的代码好呢！{:4_179:} 欣赏佳作！
歌声动人，余音绕梁。 制作大气！
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待梦江南佳作频出！
感谢梦江南带来的精彩，辛苦了！祝您岁岁安康，幸福吉祥！ 小辣椒 发表于 2026-1-17 21:15
发现阿姨的动手能力特别强
没有啦，我要给小辣椒争气。{:4_204:} 小辣椒 发表于 2026-1-17 21:15
小辣椒欣赏加学习，好佩服哦
阿姨有你这么优秀的小辣椒，真的感到很幸运，很幸福！{:4_185:} 梦江南 发表于 2026-1-17 21:21
小辣椒，这电视机代码我很喜欢，你就把代码发给我，阿姨不要让你失望。是你的代码好呢！
阿姨还特别谦虚的{:4_185:} 梦江南 发表于 2026-1-17 21:23
没有啦，我要给小辣椒争气。
谢谢阿姨的关心，小辣椒感觉有你很温馨，感谢我们的相遇 梦油 发表于 2026-1-17 21:19
歌词真有意思，耐人寻味。
谢谢梦油欣赏，晚上好！{:4_204:} 偶然~ 发表于 2026-1-17 21:22
欣赏佳作！
谢谢偶然管管欣赏，晚上好！{:4_204:} 偶然~ 发表于 2026-1-17 21:22
歌声动人，余音绕梁。
谢谢夸赞。