酒醉的蝴蝶 - 第3页 - 动画音画 - 花潮论坛

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

本帖最后由也曾年轻于 2026-1-18 10:14 编辑 <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>

梦江南 发表于 2026-1-18 10:01

红影发表于 2026-1-17 22:57
这个制作漂亮，笔记本电脑图片的显示屏上是轮播图图，这个制作真好

问好影子，这是小辣椒的代码，仿做而已。{:4_204:}

梦江南 发表于 2026-1-18 10:01

偶然~ 发表于 2026-1-18 00:53
松筠常青，岁月静好

开心快乐就好。

梦江南 发表于 2026-1-18 10:02

庶民发表于 2026-1-18 09:31
这个很有心意新意。

问好庶民版主，谢谢欣赏。{:4_204:}

梦江南 发表于 2026-1-18 10:07

也曾年轻发表于 2026-1-18 10:00
.itemm {
z-index: 1;
width: 800px;

这帖的小白块没有了。

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

梦江南发表于 2026-1-18 10:07
这帖的小白块没有了。

修改调整的，多余的代码都删除了，而且所有的动态一键控制。

梦江南 发表于 2026-1-18 10:13

也曾年轻发表于 2026-1-18 10:11
修改调整的，多余的代码都删除了，而且所有的动态一键控制。

太好了，我已换上了。

梦江南 发表于 2026-1-18 10:19

也曾年轻发表于 2026-1-18 10:11
修改调整的，多余的代码都删除了，而且所有的动态一键控制。

感觉好像一闪一闪的，这是什么？

偶然~ 发表于 2026-1-18 10:21

梦江南发表于 2026-1-18 10:01
开心快乐就好。

快乐常伴，笑口常开

偶然~ 发表于 2026-1-18 10:22

梦江南发表于 2026-1-18 09:59
平安吉祥

鹤算千年寿，松龄万古春

偶然~ 发表于 2026-1-18 10:23

梦江南发表于 2026-1-18 09:58
新的一天快乐！

心想事成，美梦成真

梦江南 发表于 2026-1-18 10:29

偶然~ 发表于 2026-1-18 10:21
快乐常伴，笑口常开

谢谢，彼此都好。

梦江南 发表于 2026-1-18 10:30

偶然~ 发表于 2026-1-18 10:22
鹤算千年寿，松龄万古春

心静则寿，德厚积福

偶然~ 发表于 2026-1-18 10:32

梦江南发表于 2026-1-18 10:30
心静则寿，德厚积福

快乐常伴，笑口常开

梦江南 发表于 2026-1-18 10:34

偶然~ 发表于 2026-1-18 10:23
心想事成，美梦成真

健康快乐，岁月静好

梦江南 发表于 2026-1-18 10:36

偶然~ 发表于 2026-1-18 10:31

{:4_180:}

梦江南 发表于 2026-1-18 10:39

偶然~ 发表于 2026-1-18 10:32
快乐常伴，笑口常开

心无挂碍，快乐常驻

偶然~ 发表于 2026-1-18 10:40

梦江南发表于 2026-1-18 10:39
心无挂碍，快乐常驻

身似闲云常自在，心同皓月永清明

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

梦江南发表于 2026-1-18 10:19
感觉好像一闪一闪的，这是什么？

是不是指歌词一闪一闪的，那是这帖的动态之一，暂停时就不闪了。
如果不希望它闪去掉（31#的）146行就行了。

梦江南 发表于 2026-1-18 11:23

偶然~ 发表于 2026-1-18 10:40
身似闲云常自在，心同皓月永清明

这就是人生的最高境界。学习了。

页: 1 2 [3] 4

花潮论坛's Archiver