醉美水芙蓉 发表于 2022-9-3 16:15

情深缘浅太可惜

本帖最后由 醉美水芙蓉 于 2022-9-3 16:14 编辑 <br /><br /> <div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-210px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f83a6a9555656f3251619e9b54c4c0b5.jpeg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT">
<divid="testImg" class="mm"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6cfaf2b01054de5bf32e46c67dcb22de_preview.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/633d08aba8ffe44516ed18dee4f22a3f.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bd6af11966561814bed2f8a42a14d2e8.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9b601ee0f4070d8fc85c4c1cfdb3be0b.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f2a53a1e6e81b4cd7c41058d2ebd578d.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cca52b1a62e7e197fffa68a0bc9a1c8.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/35bde4351de72d52a856e23ff870c139.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/076562a250ab8a9afa2edadc5cdca91d.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/abec66ed922b6aeede7699c2277e3d33.jpg" /></div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/up/kwlink.php?id=237714092&.mp3" loop="" ></audio>
<div class="img_border" ><img id="aplay" style="width: 150px; height: 150px;mask: radial-gradient(transparent 6px,#red 0);-webkit-mask: radial-gradient(transparent 6px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/85610539639d79f16fe482dabb62d19e.jpeg)-150px 0px/160% 100%; "></div>

      <div class="btn">
    <div   id="testImg" onclick="bf()"> <input type="button"id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
</div>

<div class="lrc">
<ul id="ullrc">
         </ul>
      </div></div>
</div>

<style type="text/css">

.mm img{width:300px;
                height: 180px;
                position: absolute;
                left:0px;
                    top:0px;z-index: 10;
                box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 8px #cccccc;
background-size:100% 100%;
                border-radius: 0px;
            }
             .mm img:nth-child(1){
                transform:translateZ(450px);}
            .mm img:nth-child(2){
                transform: rotateY(40deg) translateZ(450px);
            }
            .mm img:nth-child(3){
                transform: rotateY(80deg) translateZ(450px);
            }
            .mm img:nth-child(4){
                transform: rotateY(120deg) translatez(450px);
            }
            .mm img:nth-child(5){
                transform: rotateY(160deg) translatez(450px);
            }
            .mm img:nth-child(6){
                transform: rotateY(200deg) translatez(450px);
            }
            .mm img:nth-child(7){
                transform: rotateY(240deg) translatez(450px);
            }
            .mm img:nth-child(8){
                transform: rotateY(280deg)translatez(450px);
            }
            .mm img:nth-child(9){
                transform: rotateY(320deg) translatez(450px);
            }



            .mm img:nth-child(1):stop{
               }
            .mm img:nth-child(2):stop{
               
            }
            .mm img:nth-child(3):stop{
               
            }
            .mm img:nth-child(4):stop{
               
            }
            .mm img:nth-child(5):stop{
               
            }
            .mm img:nth-child(6):stop{
            }
            .mm img:nth-child(7):stop{
               
            }
            .mm img:nth-child(8):stop{
               
            }
            .mm img:nth-child(9):stop{
               
            }
         .stop{
            animation-play-state:paused;
               }
            .mm{
                margin: 160px auto;
                width: 260px;
                height: 180px;
                transform-style: preserve-3d;
                animation-name: animate;
                animation-duration: 50s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;

                position: relative;
            }
            @keyframes animate{
                from {transform: rotatex(-20deg) rotateY(0deg);}
50% {transform: rotatex(20deg) rotateY(-720deg);}
                to {transform: rotatex(-20deg) rotateY(0deg);}
            }


</style>
<style type="text/css">.items{ 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 image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
</script>


<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
    width: 870px;
    height: 140px;
    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:500px; left:60px;z-index: 30;
    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: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color: red;
   background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
   background-repeat:no-repeat;
   background-position: -800px 0;
   -webkit-animation:loop 3s linear infinite;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}

/*mv动画*/
.img_border{display:inline-block;width:150px;height:150px;position: absolute;top:440px; left:810px;z-index: 14;}
.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 8s linear infinite;
}@keyframes rotating{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

</style>

<script>var lrc =`情深缘浅太可惜
演唱：雨露
作词：左为
作曲：婧琪
编曲：赵晨风
混音工程师：五毒天书
制作：婧琪
监制：婧琪
OP：海酝文化
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 = 70;
    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 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="";
                }
            }
      }
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
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-9-3 16:31

水芙蓉这个制作好创意。挺好看的。{:4_199:}

醉美水芙蓉 发表于 2022-9-3 16:34

加林森 发表于 2022-9-3 16:31
水芙蓉这个制作好创意。挺好看的。

队长周末愉快！

加林森 发表于 2022-9-3 16:48

醉美水芙蓉 发表于 2022-9-3 16:34
队长周末愉快！

{:4_190:}

马黑黑 发表于 2022-9-3 17:33

非常漂亮

醉美水芙蓉 发表于 2022-9-3 17:45

马黑黑 发表于 2022-9-3 17:33
非常漂亮

谢谢老师光临！

马黑黑 发表于 2022-9-3 17:47

醉美水芙蓉 发表于 2022-9-3 17:45
谢谢老师光临！

{:4_190:}

梦缘 发表于 2022-9-3 19:31

漂亮的创意作品，欣赏老师的精美分享！{:4_171:}

红影 发表于 2022-9-3 20:38

好漂亮的制作，水芙蓉美女真棒{:4_199:}

醉美水芙蓉 发表于 2022-9-3 20:41

梦缘 发表于 2022-9-3 19:31
漂亮的创意作品，欣赏老师的精美分享！

谢谢老师点评！

醉美水芙蓉 发表于 2022-9-3 20:41

红影 发表于 2022-9-3 20:38
好漂亮的制作，水芙蓉美女真棒

谢谢红影美女鼓励！

东篱闲人 发表于 2022-9-3 20:56

转的漂亮！{:5_116:}

东篱闲人 发表于 2022-9-3 20:56

今天咋都旋转起来了呢？{:5_117:}

醉美水芙蓉 发表于 2022-9-3 20:58

东篱闲人 发表于 2022-9-3 20:56
今天咋都旋转起来了呢？

跟老师们学习转呀！

红影 发表于 2022-9-3 22:16

醉美水芙蓉 发表于 2022-9-3 20:41
谢谢红影美女鼓励！

这么多大美女，很是赏心悦目呢{:4_187:}
页: [1]
查看完整版本: 情深缘浅太可惜