论坛 › 现代文学 › 【末伏消暑】第三天 休---《阿云嘎 - 不罢休》

醉美水芙蓉 发表于 2022-8-17 21:39

【末伏消暑】第三天 休---《阿云嘎 - 不罢休》

本帖最后由 醉美水芙蓉 于 2022-8-17 21:39 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left：-00px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:linear-gradient(180deg, rgba(255, 224, 0, 0.45) 0%,rgba(5, 246, 93, 0.41) 25%,rgba(1, 50, 251, 0.29) 47%,rgba(243, 5, 5, 0.45) 85%),url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/64ffdfa56ebc539f8e4ef9853d46d2b6.mp4.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div class="items">
<div class="bg">
<div id="aplay" >
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/d38257f3a667ebf2a3e92ad8635c683e.mp4.jpg" style="width: 1024px;height: 600px;clip-path:circle(35% at 50% 50%);-webkit-transform:translate(0%,0%);" />
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/9d7771069772fa8031ae501262c1b3ca_preview.jpg "/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/468f84499d735fb7f168b1683424d9d7_preview.jpg"/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a3bfb5843f002e51db4920d75b96bb91_preview.jpg" />
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/f68ea68967b986f132583cfaf9505167_preview.jpg"/>
      <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/04cb724146293e758477b8e96fc53c03_preview.jpg"/>
      <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/0c5a74853ff64f3f721561ea4a2bbbf7_preview.jpg "/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/dcee618d46e1582b0bacf9a8cbaa2a1e_preview_raw.jpg"/>
</div></div>
<div class="BJ">
<audio autoplay="" class="audio" id="MusicPlayer" src=" https://www.qqmc.com/up/kwlink.php?id=204866175&.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-105px;left:860px;width:150px;height:150px;z-index: 600;"/>
      </div>
<divclass="lrc" >
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>
</div>
<style type="text/css">
.bg {
width: 1024px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;overflow: hidden;
}
.cb-slideshowimg{
width: 1024px;
height: 600px;
position: absolute;
top: 0px;
left:0px;display: block;
opacity: 0;
z-index: 100;
animation: imageAnimation 64s infinite;
}

.cb-slideshow#aplay{}

.cb-slideshow :nth-child(8){

animation-delay: 56s
}

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

animation-delay: 48s;
}

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

animation-delay: 40s;
}

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

animation-delay: 32s
}

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

animation-delay: 24s;
}
.cb-slideshow :nth-child(3){

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

animation-delay: 8s;
}
#aplay.cb-slideshow :nth-child(1){

animation-delay: 0s;
}
@keyframes imageAnimation
{0% {
opacity: 1;clip-path:circle(35% at 30% 50%);
-webkit-transform:translate(0%,0%)scale(1);}

8% {
opacity: 1;clip-path:circle(35% at 70% 50%);
-webkit-transform:translate(0%,0%)}
10% {
opacity: 1;clip-path: circle(35% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}

12% {
opacity: 1;clip-path: circle(80% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}

18% {
opacity: 0;clip-path: circle(80% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
}
</style>
<style type="text/css">
.BJ{width: 1px;
    margin: 0;position: absolute;top:500px; left:0px;z-index: 100;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0;
}
.lrc{
    width: 980px;
    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:-80px;
    margin: 0 auto;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 35px;
    color: #000078;transform: translate(20%,0%);
    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: 35px;
    color: #ff0000;transform: translate(-10%,0%);
    font-weight: bold;
}



</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 3s linear infinite ;}

@keyframes slider {from {opacity: 1;filter:hue-rotate(80deg)contrast(140%)brightness(90%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(80%);}}
</style>
<script>var lrc = ` 阿云嘎 - 不罢休
作词：接靓
作曲：阿鲲
光鲜多是虚构
焦虑在笑背后
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>
       var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
    </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="";};my_audio.onplaying = function()

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

</script>

马黑黑 发表于 2022-8-17 21:54

{:4_199:}

醉美水芙蓉 发表于 2022-8-17 21:58

马黑黑 发表于 2022-8-17 21:54


黑黑老师晚上好！

红影 发表于 2022-8-17 22:21

这个局部展示的图片轮播很漂亮，水芙蓉真棒{:4_187:}

沐风 发表于 2022-8-17 22:32

童年的味道。{:4_180:}

醉美水芙蓉 发表于 2022-8-17 22:38

红影 发表于 2022-8-17 22:21
这个局部展示的图片轮播很漂亮，水芙蓉真棒

红影美女晚上好！

醉美水芙蓉 发表于 2022-8-17 22:38

沐风 发表于 2022-8-17 22:32
童年的味道。

谢谢朋友支持！

马黑黑 发表于 2022-8-17 22:38

醉美水芙蓉 发表于 2022-8-17 21:58
黑黑老师晚上好！

晚上好

红影 发表于 2022-8-17 23:10

醉美水芙蓉 发表于 2022-8-17 22:38
红影美女晚上好！

晚上好，芙蓉美女{:4_187:}

醉美水芙蓉 发表于 2022-8-18 18:51

沐风 发表于 2022-8-17 22:32
童年的味道。

谢谢朋友支持！

查看完整版本: 【末伏消暑】第三天 休---《阿云嘎 - 不罢休》