醉美水芙蓉 发表于 2022-6-5 21:31

如火的爱似情歌

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:
hidden;transform:rotate(0deg);background: url(http://pan.yinhuabbs.cn/view.php/f849802b11fff62e026b79f64fb84d33.png)0 0/100%100%; text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/ff29823e2d06ee4219924080df57eaaa.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2ed547e15c089c8c75527faa7d2c2dc6.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/ab949cc21f76c631fec539bbe7823b84.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/9416710a10b6b1dda274e6aeaec15453.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/39e03fbaaaabaf3629a70511fd46981f.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/25c1eb4a27cdc06e0cd9bd413760b108.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/8593960a5bb85b2a56d2d3e7c79525b7.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/bbc8d888769c52201f4eba6711dda3c5.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=206660440&.mp3" controls loop style="width: 0%; height: 0%;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:-70px;left:35px;width:140px;height:140px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index:

600;"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="bs" style="width: 980px; height: 120px;z-index: 300;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;z-index: 300;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(100%,0%)scale(0);}
5% {
opacity: 1;
transform:translate(100%,0%)scale(0);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(-100%,0%)scale(1);}
}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >
<style type="text/css">
.container{width: 1000px;height: 600px;
    margin: 0;position: absolute;top:500px; left:0px;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;
    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:-10px; left:50px;
    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: 70px;
    line-height: 70px;
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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 290;position: absolute;
   top:-500px;
    left: 0px;background: url(http://pan.yinhuabbs.cn/view.php/f849802b11fff62e026b79f64fb84d33.png)0 0/100%100%;
animation: rotating 0.05s linear infinite;}
@keyframes rotating{0%{
      background-position: 0% 0;transform: scale(1);filter:hue-rotate(0deg)contrast(110%)brightness(200%);
    }
    100%{
      background-position: 0 0%;transform: scale(1.3);filter:hue-rotate(360deg)contrast(110%)brightness(120%);
    }
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 12px #CD6600) drop-shadow(0px 0px 12px #CD6600)drop-shadow(0px 0px 12px #CD6600)

brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)brightness(100%);}}
</style>
<script >var lrc = ` 如火的爱似情歌 (DJ可乐版)
作词：郭亿梅
作曲：王德栋
DJ编曲：DJ可乐
制作人：沙哑哥吴耀胜
出品人：沙哑哥吴耀胜
OP：龙岩市品圣文化传媒
是谁吹开百花朵朵
撩动恋人如胶似火
是谁轻轻哼唱不老情歌
把爱情写成一段传说
是谁盛开寂寞花朵
相思情就洒满山坡
溜溜的情呀溜溜的爱
溜溜的世界你和我
如火的爱呀似情歌
如火的吉祥舞洒脱
幸福满天点燃新生活
绵绵情意醉在心窝窝
如火的爱呀似情歌
如火的欢乐大声唱
美好的日子充满着寄托
悠悠情深只许心一颗
是谁吹开百花朵朵
撩动恋人如胶似火
是谁轻轻哼唱不老情歌
把爱情写成一段传说
是谁盛开寂寞花朵
相思情就洒满山坡
溜溜的情呀溜溜的爱
溜溜的世界你和我
如火的爱呀似情歌
如火的吉祥舞洒脱
幸福满天点燃新生活
绵绵情意醉在心窝窝
如火的爱呀似情歌
如火的欢乐大声唱
美好的日子充满着寄托
悠悠情深只许心一颗
如火的爱呀似情歌
如火的吉祥舞洒脱
幸福满天点燃新生活
绵绵情意醉在心窝窝
如火的爱呀似情歌
如火的欢乐大声唱
美好的日子充满着寄托
悠悠情深只许心一颗
谢谢欣赏！`;
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 = 50;
    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="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

绿叶清舟 发表于 2022-6-5 21:35

制作真漂亮啊，怎么评不了分了

醉美水芙蓉 发表于 2022-6-5 21:39

绿叶清舟 发表于 2022-6-5 21:35
制作真漂亮啊，怎么评不了分了

清舟美女晚上好！

绿叶清舟 发表于 2022-6-5 21:44

醉美水芙蓉 发表于 2022-6-5 21:39
清舟美女晚上好！

芙蓉晚上好

马黑黑 发表于 2022-6-5 21:55

漂酿

绿叶清舟 发表于 2022-6-5 21:59

为什么我的评分点不上去了

醉美水芙蓉 发表于 2022-6-5 22:07

马黑黑 发表于 2022-6-5 21:55
漂酿

谢谢黑黑老师欣赏鼓励！

加林森 发表于 2022-6-5 22:11

挺不错的。

马黑黑 发表于 2022-6-5 22:12

醉美水芙蓉 发表于 2022-6-5 22:07
谢谢黑黑老师欣赏鼓励！

{:5_108:}

红影 发表于 2022-6-5 22:49

漂亮的图片轮播和动画运用，欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2022-6-5 23:00

加林森 发表于 2022-6-5 22:11
挺不错的。
谢谢队长鼓励！

醉美水芙蓉 发表于 2022-6-5 23:02

红影 发表于 2022-6-5 22:49
漂亮的图片轮播和动画运用，欣赏水芙蓉好帖

红影美女晚上好！

加林森 发表于 2022-6-5 23:18

醉美水芙蓉 发表于 2022-6-5 23:00
谢谢队长鼓励！

不客气啊。

马黑黑 发表于 2022-6-6 12:54

再来洗洗眼
页: [1]
查看完整版本: 如火的爱似情歌