紫藤花-金婷婷&王泽南
<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/08/29/6a91de48e4e8b.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 52s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91de2508c24.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 48s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91de023b297.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 44s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dde19725f.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 40s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91ddc69dad7.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 36s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dda9a7720.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 32s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dd8d2b84f.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91de6adbf6f.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 24s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dd488b1e4.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 20s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dd25dc981.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 16s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dd05a274f.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 12s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dce4a4107.jpeg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 8s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dcbf5e44a.jpeg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 4s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dc9e034cb.jpg)no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url(https://free.picui.cn/free/6377/2026/08/29/6a91dc7624799.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://free.picui.cn/free/6377/2026/08/28/6a91a0c393b5a.jpeg" /></div>
<img id="tp" src="https://free.picui.cn/free/6377/2026/08/28/6a91a0869c444.jpeg" alt="" />
<div id="bt">花潮论坛</div>
<audioid="aud" loop controls autoplay style="width: 90%;">
<source src="https://pan.suyanw.cn/view.php/382938bd56f8645020c3aee0de3ada77.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>
好漂亮的紫藤花啊,这些轮播图片是万顷湖老师自己拍摄的吧,太美了{:4_199:} 红影 发表于 2026-8-30 22:30
好漂亮的紫藤花啊,这些轮播图片是万顷湖老师自己拍摄的吧,太美了
报告红影管理:我不会拍摄,图片来自百度。谢谢关注,谢谢扶持。
万顷湖 发表于 2026-8-31 07:06
报告红影管理:我不会拍摄,图片来自百度。谢谢关注,谢谢扶持。
您太客气了,大家在网上都是来开心的,每个人都一样,叫我影子就好{:4_204:}
页:
[1]