论坛 › 欢乐水吧 › 不想在红尘中错过你

醉美水芙蓉 发表于 2022-6-11 20:36

不想在红尘中错过你

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-210px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c43f4b3deeadb3c1a49a78952a902fca.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d4ddfb721d9abe3931ee9273b058041.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/88a452b9620dfc56e8d557bb27a4b7f9.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/32f80b75a4e14c143523cb972650b967.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/f13e4bc85d1c2ea35480976e9f068f14.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a9d0ec40b65b87219d353e18c37084c5.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/f2af339109e7ae313e32c91778a787aa.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/c081a07e9c90c9faf8495709c3f6bccd.jpg" alt="" />
<div class="container">
<audio id="MusicPlayer" autoplay src="https://www.qqmc.com/up/kwlink.php?id=223370291&.mp3&.mp3" controls loopstyle="width: 0px; height: 0px;z-index: 0;"> </audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 980px; height: 380px;z-index: 300;position: absolute;top:-430px; left:0px;"></span>
       </div>
<div class="img_border"><imgid="aplay"style="width: 100%; height:100%;position: absolute;top:0px; left:0px;z-index: 110;clip-path: circle(50% at 50% 50%);background:url(https://s1.ax1x.com/2022/06/11/XgEwKU.png)0 0/100% 100%, url(https://imgessl.kugou.com/stdmusic/20220608/20220608141923259876.jpg)0px 0px/100% 110%;" ></div>
<div class="items" >
<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;
filter:contrast(130%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {opacity: 1;clip-path:polygon(50% 0%, 50% 25%, 50% 85%, 50% 100%, 50% 85%, 50% 25%);-webkit-transform:translate(0%,0%)scale(1);}
3%{opacity: 1;clip-path:polygon(50% 0%, 50% 25%, 50% 85%, 50% 100%, 50% 85%, 50% 25%);-webkit-transform:translate(0%,0%)scale(1);}
6% {opacity: 1;polygon(50% 0%, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
9% {opacity: 0.8;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);polygon(50% 0%, 100% 50%, 100% 50%, 50% 100%, 0 49%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
20% {opacity: 0;clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);-webkit-transform:translate(0%,0%)scale(2);}
}
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: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;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: 120px;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:-10px; 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: 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: 40px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:380px;height:380px;margin:0px ;position: absolute;top:-430px;left:250px;transform: scale(1,1);transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);border-radius:50%;}
.container .img_border #aplay{display:block;border:3px solid #fff000;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{10%{left:350px;transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);clip-path: circle(50% at 50% 50%);background:url(https://s1.ax1x.com/2022/06/11/XgEwKU.png))0 0/100% 100%, url(http://imge.kugou.com/stdmusic/20220209/20220209185515482193.jpg)0px 0px/100% 100%;filter:hue-rotate(360deg)contrast(140%)brightness(100%);}
90%{left:-280px;transform:rotateX(0deg) rotateY(-180deg) rotateZ(-360deg);clip-path: circle(50% at 50% 50%);background:url(https://s1.ax1x.com/2022/06/11/XgEwKU.png )0 0/100% 100%, url(http://imge.kugou.com/stdmusic/20220209/20220209185515482193.jpg)0px 0px/100% 100%;filter:hue-rotate(0deg)contrast(150%)brightness(100%);}
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.026s 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 = `点击光碟音乐暂停/开启
金艾娜 - 不想在红尘中错过你
作词：金艾娜
作曲：钰柃
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 = 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>
   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>

</td></tr></table>

四海八荒 发表于 2022-6-11 20:38

心想事成{:4_173:}

梦油 发表于 2022-6-11 20:59

一句话——美不胜收。{:4_178:}

醉美水芙蓉 发表于 2022-6-11 21:06

四海八荒 发表于 2022-6-11 20:38
心想事成

四海版主晚上好！

醉美水芙蓉 发表于 2022-6-11 21:06

梦油 发表于 2022-6-11 20:59
一句话——美不胜收。

梦油老师晚上好！

东篱闲人 发表于 2022-6-11 22:22

帖子做的着实漂亮！{:5_116:}

红影 发表于 2022-6-11 23:34

很美妙的效果，欣赏水芙蓉漂亮的制作{:4_187:}

加林森 发表于 2022-6-11 23:42

挺好的。水芙蓉制作得不错啊！{:4_199:}

马黑黑 发表于 2022-6-11 23:52

光碟的效果很有特色

醉美水芙蓉 发表于 2022-6-12 06:52

东篱闲人 发表于 2022-6-11 22:22
帖子做的着实漂亮！

问候东篱老师早上好！

醉美水芙蓉 发表于 2022-6-12 06:52

红影 发表于 2022-6-11 23:34
很美妙的效果，欣赏水芙蓉漂亮的制作

问候红影早上好！

醉美水芙蓉 发表于 2022-6-12 06:53

加林森 发表于 2022-6-11 23:42
挺好的。水芙蓉制作得不错啊！

问候队长早上好！

醉美水芙蓉 发表于 2022-6-12 06:53

马黑黑 发表于 2022-6-11 23:52
光碟的效果很有特色

问候黑黑老师早上好！

马黑黑 发表于 2022-6-12 07:30

醉美水芙蓉 发表于 2022-6-12 06:53
问候黑黑老师早上好！

早啊{:4_190:}

加林森 发表于 2022-6-12 08:33

醉美水芙蓉 发表于 2022-6-12 06:53
问候队长早上好！

谢谢！早上好！

梦油 发表于 2022-6-12 11:16

醉美水芙蓉 发表于 2022-6-11 21:06
梦油老师晚上好！

你好，水芙蓉朋友。你制作的帖子真美。

查看完整版本: 不想在红尘中错过你