醉美水芙蓉 发表于 2023-6-7 22:29

张靓颖 - You Ain't Right

<style>
#papa { margin: 10px -280px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,linear-gradient(80deg, #000080, #000090, #000000, #111111); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:80%;color:#00ff00; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}

.photo {width: 100%;
height: 100%;
position: absolute;z-index: -2;
border:0px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{2% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
8% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0deg)scale(0.8)translate(10%,-10%);
opacity:1
}
12% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0)scale(0.8)translate(10%,-10%);
opacity:1
}
22% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(280deg)scale(0.8)translate(10%,-10%);
opacity:0
}
}

img:nth-child(1) {
animation-delay: 84s;
}
img:nth-child(2) {
animation-delay: 78s;
}
img:nth-child(3) {
animation-delay: 72s;
}
img:nth-child(4) {
animation-delay: 66s;
}
img:nth-child(5) {
animation-delay: 60s;
}
img:nth-child(6) {
animation-delay: 54s;
}
img:nth-child(7) {
animation-delay: 48s;
}
img:nth-child(8) {
animation-delay: 42s;
}
img:nth-child(9) {
animation-delay: 36s;
}
img:nth-child(10) {
animation-delay: 30s;
}
img:nth-child(11) {
animation-delay: 24s;
}
img:nth-child(12) {
animation-delay: 18s;
}
img:nth-child(13) {
animation-delay: 12s;
}
img:nth-child(14) {
animation-delay: 6s;
}
img:nth-child(15) {
animation-delay: 0s;
}


.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-play-state: paused;
}
.stop img:nth-child(4){
animation-play-state: paused;
}
.stop img:nth-child(5){
animation-play-state: paused;
}
.stop img:nth-child(6){
animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-play-state: paused;
}

.stop img:nth-child(9) {
animation-play-state: paused;
}
.stop img:nth-child(10) {
animation-play-state: paused;
}

.stop img:nth-child(11) {
animation-play-state: paused;
}
.stop img:nth-child(12) {
animation-play-state: paused;
}
.stop img:nth-child(13) {
animation-play-state: paused;
}
.stop img:nth-child(14) {
animation-play-state: paused;
}

.stop img:nth-child(15) {
animation-play-state: paused;
}

</style>
<style>
#mpic {
        position: absolute;z-index: 1;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        animation: rote 20s linear infinite;
        cursor: pointer;background: url('https://365.tf/disk/tf/1676652907.pn ')0 0/70% 65%;
        opacity: 0.7;
}

@keyframes rote {
        0%{
      background-position: 0% 0;filter:hue-rotate(0deg)blur(3px)
    }
    100%{
      background-position: -300% 600%;filter:hue-rotate(0deg)blur(0px)
    }
}

#mpic1 {
        position: absolute;z-index: 1;
        transform: rotateZ(0deg);
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        animation: rotet 40s linear infinite;
        cursor: pointer;background: url('https://365.tf/disk/tf/1676652907.png')0 0/40% 45%;
        opacity: 0.7;
}


@keyframes rotet {
       0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 0% 600%;filter:hue-rotate(0deg);transform:rotate(0deg)
    }
}
       
</style>

<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music278668563.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/73b5b268834ae540aefa4430abd17d58_preview_raw.jpg" />
<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/725becdcb3ab561e7471c45ebeaa3e3b_preview_raw.jpg" />
<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/6d0cd097c963bb4dff31af8bf966bc95_preview_raw.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/238953dacb9496d511cc1f1c77d8c327_preview_raw.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/956e0ec86e950602ce00d0ce9d5b30a1_preview_raw.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/1a164f731da964bf888f6e4a3321c440_preview.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/38da92352bb64cad420c60d705f3f56b.mp4.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/e374e9b66786c6976243adbceb3f35c8.mp4.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/c3a50b9e54a8a465098824c5115fc295.mp4.jpg" />
<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/d718db11d93c533d2ab07c4d9442aa68.mp4.jpg" />
<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/4b390fbf178b350af87bf5b87f27e4af.mp4.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/aca210a02e802f96ab79a768a2691a87.mp4.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/19753d493a1fda25f76a62148a724ee8_preview.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/d0eb2f3594966c3b60850ede7c02aa80_preview.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/1b2f49acc032dcea012593c1b7c27570.mp4.jpg" />
</div>
<div id="mpic"></div>
<div id="mpic1" ></div>
<div id="mybox"></div>
<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
<div class="lrc" >
      <liid="ullrc" >
          </li>
      </div>
</div>
</div>
<style>


.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:90%; left:10%;
        z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #ff0078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    background-image:linear-gradient(90deg, #00ff00, #fff000, #ff0000, #00ff00);
   background-position: 0px 0;
   -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(180%)brightness(500%);}
   
}
#img_border{display:inline-block;width:100px;height:100px;position: absolute;top:15%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
</style>

<script >
var lrc = `词：田与川/张靓颖/Oumnia Guigui /Kat Eaton /Andy Gilbert
曲：Oumnia Guigui /Kat Eaton /Andy Gilbert
编曲：Gold Child
制作人：Gold Child
和声：张靓颖/林灵/宋赫伦
人声录音：倪涵文@Studio21A
混音：Matt Sim
母带：周天澈@Studio21A
弦乐：国际首席爱乐乐团
弦乐录音棚：金田录音棚
鼓：李彦超
鼓录音：多斯@Studio21A
音乐总监：王迪@Super Corp. /馬RS
监制：王迪@Super Corp. /馬RS
LRC编辑：醉美水芙蓉
落空的希望 它蒙住了远方
当一切 又虚幻了一场
望着旧的伤 那红了的眼眶
又一次忍不住 泪水流淌
侵蚀这屏障 你说是妄想
但我要怎样 才能遮住心底的光
以为我将锋芒都归还
But You Ain't Right
身陷黑暗更要亮出珍贵的勇敢
Keepin' Me Alive
Keepin' Me Alive
Keepin' Me Alive
越混沌的现在 越值得期待未来
握紧我的手 见证盛开时的璀璨
Keepin' Me Alive
Keepin' Me Alive
Keepin' Me Alive
这个角落给不安
留几分钟给遗憾
不要害怕 痛会指引 你该坚定的方向
就享受 好或坏 恨或爱 交锋的存在
以为我将锋芒都归还
But You Ain't Right
身陷黑暗更要亮出珍贵的勇敢
Keepin' Me Alive
Keepin' Me Alive
越混沌的现在 越值得期待未来
握紧我的手 见证盛开时的璀璨
Keepin' Me Alive
Keepin' Me Alive
Keepin' Me Alive
不经意 被指尖碾碎 又一局
我确定 这次更接近
感谢你No 应该感谢我自己
深信到现在
以为我将约定全都忘却
You Ain't Right
Woo
越混沌的现在 越值得期待未来
握紧我的手 见证盛开时多璀璨
Keepin' Me Alive
Keepin' Me Alive
Keepin' Me Alive
Keepin Me
But You Keepin' Me Alive
Keepin Me
But You Keepin' Me Alive
Keepin Me
Keepin' Me Alive
谢谢欣赏！`;

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 = 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 = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;

var image = document.getElementById("testImg"),
    button = document.getElementById("btn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');



mpic1.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mpic1.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mpic1.style.animationPlayState = 'paused');

mpic.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mpic.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mpic.style.animationPlayState = 'paused');

</script >


<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

<style>
#mybox {
      margin: auto;
      width: 500PX;
height: 120PX;
position: absolute;top:10px; left:10px;z-index: 2;
}
.mysp {color: #ffF000;
      position: absolute;
      font: bold 28px/36px 华文隶书;
filter:drop-shadow( 1px 1px 1px #000000);
}

@keyframes move {
      0% { top: 0px; transform: rotate(0); color: #ff0000; }
      50% { top: 60px; transform: rotate(100deg); color: #ffffff; }
      100% { top: 0px; transform: rotate(360deg); color:#00f000 ; }
}
</style>
<script>
(function() {
      let spans = [],idx = 0, last = null;

      [...'醉美水芙蓉欢迎你'].forEach((item,key) => {
                let sp = document.createElement('span');
                sp.className = 'mysp';
                sp.innerText = item;
                sp.style.cssText += `left: ${key*36+36}px`;
                spans.push(sp);
                mybox.appendChild(sp);
      });

      let mov = () => {
                if(last != null) spans.style.animation = '';
                spans.style.animation = 'move 2s';
                last = idx;
                idx += 1;
                if(idx >= spans.length) idx = 0;
                setTimeout(mov,2000);
      };

      mov();
})();
</script>

梦缘 发表于 2023-6-8 09:35

真好看好听，感谢分享！{:4_190:}

马黑黑 发表于 2023-6-7 22:54

美美哒

红影 发表于 2023-6-7 23:02

制作漂亮。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-7 23:26

马黑黑 发表于 2023-6-7 22:54
美美哒

谢谢黑黑老师光临！

醉美水芙蓉 发表于 2023-6-7 23:27

红影 发表于 2023-6-7 23:02
制作漂亮。欣赏水芙蓉美女好帖

谢谢红影美女光临！

红影 发表于 2023-6-8 10:45

醉美水芙蓉 发表于 2023-6-7 23:27
谢谢红影美女光临！

文字下落用在这里很漂亮{:4_187:}

醉美水芙蓉 发表于 2023-6-8 11:44

梦缘 发表于 2023-6-8 09:35
真好看好听，感谢分享！

谢谢老师支持！

马黑黑 发表于 2023-6-8 12:18

醉美水芙蓉 发表于 2023-6-7 23:26
谢谢黑黑老师光临！

客气客气

南无月 发表于 2023-6-8 18:31

美人儿多多，十分好看{:4_187:}

醉美水芙蓉 发表于 2023-6-8 19:50

南无月 发表于 2023-6-8 18:31
美人儿多多，十分好看
月儿来啦！期待你的好作品！
页: [1]
查看完整版本: 张靓颖 - You Ain't Right