黄昏尽晚霞-杨仪波

万顷湖 发表于 2026-9-3 20:59

本帖最后由万顷湖于 2026-9-3 21:04 编辑 <br /><br /><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_125547">
<br /><br /><div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-210px;MARGIN-top:150px;">
<style type="text/css">
#papa{
position: relative;
width: 1164px;
height: 640px;
   margin-left:20px;
margin-top:10px;
border: 0px solid rgba(36, 201, 219,.95);
   border-radius: 0px;
background:#000;
overflow: hidden;
}

.photo {width: 1164px; height: 640px;
position: absolute;
top:0%; left:0%;
opacity: 0;
animation: round 60s linear infinite;}
@keyframes round{0% {
opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transform:translate(0%,0%)scale(1);}
4% {
opacity: 1;clip-path:polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transform:translate(0%,0%)scale(1);}
11% {
opacity: 0;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transform:translate(0%,0%)scale(2);}
}}
.photo:nth-child(1) {animation-delay: 56s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9941ec51f10.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 52s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9941c9685d5.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 48s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9941a5174b7.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 44s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a994188bfdf0.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 40s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a99416cba82b.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 36s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9941516bc4a.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 32s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a99412a7fc8f.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9940f8c453a.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 24s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9940d899d80.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 20s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a9940b66ed8f.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 16s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a99403840eba.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 12s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a994004106e6.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 8s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a993fe2c0da0.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 4s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a993e36d0bc7.jpg)no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url(https://free.picui.cn/free/6377/2026/09/03/6a993e021d090.jpg)no-repeat center/cover}
.stop .photo:nth-child(1), .stop .photo:nth-child(2), .stop .photo:nth-child(3), .stop .photo:nth-child(4), .stop .photo:nth-child(5),.stop .photo:nth-child(6), .stop .photo:nth-child(7), .stop .photo:nth-child(8),.stop .photo:nth-child(9),.stop .photo:nth-child(10), .stop .photo:nth-child(11),.stop .photo:nth-child(12), .stop .photo:nth-child(13),.stop .photo:nth-child(14),.stop .photo:nth-child(15){animation-play-state: paused;}
</style >
<div id="papa" >
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div></div>
<style>
#bfqbg {margin: 10px 20px;width:1164px;height: 120px;background:#000;border-radius:2px;position: relative;overflow: hidden;z-index: 123;}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
audio {position:absolute;top:80px;left:75px;z-index: 50;width: 100%height: 40px;outline: none;filter: invert(180); }
audio::-webkit-media-controls-enclosure {background:transparent ;border-radius: 4px;}
.media-controls-container,.media-controls-container * {background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;}
audio::-webkit-media-controls-current-time-display {order: 1; color: #000;text-shadow: unset;}
audio::-webkit-media-controls-time-remaining-display {order: 2;color: #000;text-shadow: unset;}
#bt{ width: 1200px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 25px; font-family:仿宋;z-index: 21;}
</style>
<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/65fa3ea89f345e8d03bb7a74.webp" /></div>
<img id="tp" src="https://free.picui.cn/free/6377/2026/09/03/6a9945066911c.jpg" alt="" />
<div id="bt">花潮论坛</div>
<audioid="aud" loop controls autoplay style="width: 90%;">
<source src="https://pan.suyanw.cn/view.php/64f48e05c7a48c8b536c8faf115526bb.mp3" type="audio/mp3" /></audio>
<divclass="lrc"><ul id="ullrc"></ul></div>
</div>
<style type="text/css">
.lrc{z-index: 20; width: 80%;bottom:-18px; left:18%;height: 100px;overflow: hidden;display: block;position: absolute;margin: 0 auto;}
.lrc #ullrc{width: 700px;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: 25px;color: #ffffff;}
</style>
<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;
var image0 = document.getElementById("testImg");
let mState = () => aud.paused ? (image0.classList.add('stop')):(image0.classList.remove('stop'));javascript:;
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>
</div>
<div style="height: 1200px;"> </div>

</td></tr></table>

红影发表于 2026-9-3 22:53

这制作真漂亮。欣赏万顷湖老师好帖{:4_199:}

万顷湖 发表于 2026-9-4 08:09

您的一再鼓励，让我有信心站好最后一班岗。谢谢！

杨帆发表于 2026-9-4 11:11

好听好看，谢谢万顷湖老师精彩分享{:4_190:}

梦江南 发表于 2026-9-4 14:44

画面特效很赞，歌曲好听。分享点赞！{:4_199:}

万顷湖 发表于 2026-9-4 14:55

杨帆发表于 2026-9-4 11:11
好听好看，谢谢万顷湖老师精彩分享

版主好！我年事已高，只剩学习，学习路上谢谢有您帮扶！

万顷湖 发表于 2026-9-4 15:08

梦江南发表于 2026-9-4 14:44
画面特效很赞，歌曲好听。分享点赞！

班门弄斧！有班门指点，弄斧没白弄。一赞值万金！谢谢。

杨帆发表于 2026-9-4 15:21

万顷湖发表于 2026-9-4 14:55
版主好！我年事已高，只剩学习，学习路上谢谢有您帮扶！

欣赏、学习活到老学到老的人生态度，杨仪波的歌曲富有内涵，感谢万顷湖老师精彩分享{:4_180:}

页: [1]

花潮论坛's Archiver

黄昏尽晚霞-杨仪波