情系草原-科尔沁夫

万顷湖 发表于 2026-8-5 11:27

<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/2026/08/05/6a7261c06dbbd.jpg)no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 52s;background: url(https://free.picui.cn/free/2026/08/05/6a7261dcb107a.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 48s;background: url(https://free.picui.cn/free/2026/08/05/6a7261fb99f4f.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 44s;background: url(https://free.picui.cn/free/2026/08/05/6a72621d8d21d.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 40s;background: url(https://free.picui.cn/free/2026/08/05/6a7262391a351.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 36s;background: url(https://free.picui.cn/free/2026/08/05/6a7262556904a.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 32s;background: url(https://free.picui.cn/free/2026/08/05/6a7262740fc96.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 28s;background: url(https://free.picui.cn/free/2026/08/05/6a72651926068.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 24s;background: url(https://free.picui.cn/free/2026/08/05/6a7264fb42f53.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 20s;background: url(https://free.picui.cn/free/2026/08/05/6a7264db27f62.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 16s;background: url(https://free.picui.cn/free/2026/08/05/6a7262caf1ae1.jpg)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 12s;background: url(https://free.picui.cn/free/2026/08/05/6a7262740fc96.jpg)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 8s;background: url(https://free.picui.cn/free/2026/08/05/6a7263384927d.jpg)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 4s;background: url(https://free.picui.cn/free/2026/08/05/6a726305b84dc.jpg)no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url(https://free.picui.cn/free/2026/08/05/6a7262caf1ae1.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://cccimg.com/view.php/3387cf7ad5c1be3c1f90d486a0cf8bca.jpg" alt="" />
<div id="bt">花潮论坛</div>
<audioid="aud" loop controls autoplay style="width: 90%;">
<source src="https://www.joy127.com/url/156785.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-8-5 11:35

沙发{:4_174:}精彩分享

梦江南 发表于 2026-8-5 12:12

漂亮的特效，好听的歌曲。谢谢老师精彩分享！{:4_187:}

杨帆发表于 2026-8-5 14:44

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

万顷湖 发表于 2026-8-5 14:59

玫瑰发表于 2026-8-5 11:35
沙发精彩分享

玫瑰好！您的鼓励是我前行的动力。大热天，再次感谢鼓励。

万顷湖 发表于 2026-8-5 14:59

梦江南发表于 2026-8-5 12:12
漂亮的特效，好听的歌曲。谢谢老师精彩分享！

梦江南好！您的鼓励是我前行的动力。大热天，再次感谢鼓励。

万顷湖 发表于 2026-8-5 15:00

杨帆发表于 2026-8-5 14:44
好听好看，谢谢万顷湖老师精彩分享

杨帆好！您的鼓励是我前行的动力。大热天，再次感谢鼓励。

玫瑰发表于 2026-8-5 15:08

万顷湖发表于 2026-8-5 14:59
玫瑰好！您的鼓励是我前行的动力。大热天，再次感谢鼓励。

不客气的说。

红影发表于 2026-8-5 16:19

好听的草原歌曲，制作也很赞。
欣赏万顷湖老师好帖{:4_199:}

梦油发表于 2026-8-5 16:32

英俊、潇洒、制作精美，是留给我的第一印象，谢谢万顷湖朋友为酷热的夏天带来一缕清风。

万顷湖 发表于 2026-8-5 17:59

红影发表于 2026-8-5 16:19
好听的草原歌曲，制作也很赞。
欣赏万顷湖老师好帖

红影好！班门弄斧。大热天，谢谢一再的鼓励。

万顷湖 发表于 2026-8-5 18:01

红影发表于 2026-8-5 16:19
好听的草原歌曲，制作也很赞。
欣赏万顷湖老师好帖

红影好！班门弄斧。大热天，谢谢一再的鼓励。

万顷湖 发表于 2026-8-5 18:02

梦油发表于 2026-8-5 16:32
英俊、潇洒、制作精美，是留给我的第一印象，谢谢万顷湖朋友为酷热的夏天带来一缕清风。

梦油好！班门弄斧。大热天，让您受累，谢谢一再的鼓励。

梦油发表于 2026-8-5 19:38

万顷湖发表于 2026-8-5 18:02
梦油好！班门弄斧。大热天，让您受累，谢谢一再的鼓励。

万顷湖朋友别客气。

红影发表于 2026-8-5 21:49

万顷湖发表于 2026-8-5 17:59
红影好！班门弄斧。大热天，谢谢一再的鼓励。

万顷湖太客气了，问好，祝夏安{:4_187:}

页: [1]

花潮论坛's Archiver

情系草原-科尔沁夫