【庆八一】我参加解放军穿上绿军装

秋思梦景 发表于 2023-7-30 09:04

本帖最后由秋思梦景于 2023-7-30 10:08 编辑 <br /><br /><div class="cont-area">
            <div style="MARGIN-TOP: -190px; MARGIN-LEFT: -40px">
<div style="width: 800px;height: 950px;box-shadow:0px 0px 1px 2px #1b6f2b, 0px 0px 0px 8px #eefef1,0px 0px 5px 15px #1b6f2b;overflow:hidden;border-radius:3%;margin-top:250px;margin-LEFT: 22px;">
<div class="ckeditor-html5-video" style="text-align: center;">
<video autoplay="autoplay" controlslist="nodownload" loop="loop" src="https://thumbsnap.com/i/fkcRV6XN.mp4"> </video>

<div class="container">
<div class="video" style="MARGIN-TOP: 1060px; MARGIN-LEFT: 620px">

<audio autoplay="" class="audio" id="MusicPlayer" src="http://chuangshicdn.data.mvbox.cn/music/bz/23/07/15/client23071517343444595235.mp3" controls loop style="width: 1%;

height: 1%;z-index: 1;"></audio>
   <div class="btn">
   <span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:570px; left:480px;"></span>
   <span id="bf"onclick="rbf();"></span>
   </div>
<div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/22/202201082235389221-5769293.png" id="aplay"style="width: 100%; height: 100%;z-index: 110;transform: rotateX

(45deg)rotateY(-10deg)rotateZ(0deg);" ></div>
<div class="items" >
<divclass="lrc">
   <ul id="ullrc">
      </ul>
   </div>
</div>
<style type="text/css">
.cb-slideshow li {
width: 1000px;
height: 600px;
position: absolute;
top: 0px;
left: -50px;
opacity: 0;display: block;
z-index: 100;filter:contrast(130%)brightness(100%);
animation: imageAnimation 20s linear infinite 0s
}

.cb-slideshow li:nth-child(2){

animation-delay: 2s
}

.cb-slideshow li:nth-child(3){

animation-delay: 4s
}

.cb-slideshow li:nth-child(4){

animation-delay: 6s;
}

.cb-slideshow li:nth-child(5){

animation-delay: 8s;
}

.cb-slideshow li:nth-child(6) {

animation-delay: 10s
}

.cb-slideshow li:nth-child(7){

animation-delay: 12s;
}
.cb-slideshow li:nth-child(8){

animation-delay: 14s;
}
.cb-slideshow li:nth-child(9){

animation-delay: 16s;
}
.cb-slideshow li:nth-child(10){

animation-delay: 18s;
}

@-webkit-keyframes imageAnimation
{1% {opacity: 1;clip-path:polygon(20% 0%, 20% 0, 50% 50%, 0% 80%, 0 80%, 50% 50%, 80% 100%, 80% 100%, 50% 50%, 100% 20%, 100% 20%, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
5%{
opacity: 1;clip-path:polygon(20% 0%, 0% 20%, 50% 50%, 0% 80%, 20% 100%, 50% 50%, 80% 100%, 100% 80%, 50% 50%, 100% 20%, 80% 0%, 50% 50%);
-webkit-transform:translate(0%,0%)scale(1)rotateZ(0deg);}
8% {
opacity: 1;clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;clip-path:polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0%, 50% 0);
-webkit-transform:translate(0%,0%)scale(4);}
}
</style>
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 100;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0;
}
.container .lrc{
width: 960px;
height: 180px;z-index: 1;
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 -1px0);
display: block;position: absolute;top:-70px; left:0px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 90px;
font-family:悟空大字库;
font-size: 30px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;

}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
font-weight: bold;
}

</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@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%);}}
</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 = 80, lrc_ul_height = 90;
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;
</script>
<script>
   function rbf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         audio.currentTime = 0;
         audio.play();
         bf.innerText="";
   }

   function bf() {
         var audio = document.getElementById('MusicPlayer');
         var bf=document.getElementById("bf");
         if (audio !== null) {
            if (audio.paused) {
               audio.play(); //audio.play();// 这个就是播放
               bf.innerText="";
            } else {
               audio.pause(); // 这个就是暂停
               bf.innerText="";
            }
         }
   }
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i

+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script>

</div>
</div>
</div>

<div style="MARGIN-TOP: 290px; MARGIN-LEFT: 40px"> </div>

红影发表于 2023-7-30 09:51

建军节就要到了，这个贺帖真好。借秋思梦景的好帖，同祝论坛的军人和曾经的军人们节日快乐！{:4_199:}

红影发表于 2023-7-30 09:53

秋思梦景的这帖还是今年第一个祝贺八一建军节的帖子呢，我也做了个，还没来得及发{:4_173:}

醉美水芙蓉 发表于 2023-7-30 10:03

小辣椒 发表于 2023-7-30 14:58

欢迎秋思梦景来花潮玩{:4_187:}

小辣椒 发表于 2023-7-30 14:59

欣赏秋思梦景精彩的制作{:4_199:}

梦缘发表于 2023-8-1 10:52

祝论坛的军人和曾经的军人们节日快乐！{:4_187:}

页: [1]

花潮论坛's Archiver

【庆八一】我参加解放军穿上绿军装