醉美水芙蓉 发表于 2023-9-28 21:41:05

花好月圆

<style>
#papa {margin: 10px -150px;
        width: 1164px;
        height: 620px;
        background: url('https://pic.imgdb.cn/item/65157487c458853aefc1f186.gif') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 2%,#000000    8%,rgba(2, 2, 2, 0) 20%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);opacity: 0;}
#papa:hover #mb { display:block ;opacity: 1;}
.photo {width: 600px;
height:300px;
position: absolute;z-index: 1;
top:10%; left:0px;
opacity: 0;
animation: round 48s linear infinite;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1)translate(280%,80%);filter:hue-rotate(0deg);
opacity:1}

40% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);filter:hue-rotate(360deg);
opacity:1}
41% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,-60%);filter:hue-rotate(0deg);
opacity:0}

}
.photo:nth-child(1) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/651574fdc458853aefc1ff4d.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/6515751bc458853aefc2024a.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/65157539c458853aefc20699.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 6s;background: url('https://pic.imgdb.cn/item/65157554c458853aefc20a13.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/6515751bc458853aefc2024a.jpg') no-repeat center/cover;}
.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#mplayer {position: absolute; left: 0%;top:90%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 0;}

#papa:hover #mplayer { display:block ;opacity: 1;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(92% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 0; cursor: pointer; z-index: 111}
#tx { position: absolute;
        top: 0px;
        left: 0px;z-index: 2;
        width: 100%;
        height: 100%;
        animation: tx 2s linear infinite;
        cursor: pointer;
       }

@keyframes tx {from {filter: hue-rotate(0deg);
        }
to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
}
</style>

<div id="papa">

<span id="fullscreen">全屏</span>
<div id="mb"></div>
<div id="Img" >
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
<p class="photo" ></p>
</div>

<divid="mplayer"><audiostyle="width:100%;" id="aud"   controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music22851633.mp3" type="audio/mpeg"></audio></div>
<divclass="lrc" >
      <div id="tx"><ul id="ullrc">
         </ul></div>
</div>
</div>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    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:76%; left:0%;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
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;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;}
</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 = 60;
    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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? image.classList.add('stop'): image.classList.remove('stop');
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script>

顶不顶个球 发表于 2023-11-16 21:51:31

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-11-19 22:15:00

顶不顶个球 发表于 2023-11-16 21:51
这个作品漂亮！！！！

谢谢朋友支持！
页: [1]
查看完整版本: 花好月圆