亚伦影音工作室 发表于 2023-2-5 09:04

为情所伤(DJ 豪大大版)-庄心妍

<style>
#papa { margin: 10px -200px ; width: 1100px; height: 640px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%,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 ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; 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;

top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {opacity: 0;}
10% {opacity: 1;}
18% {opacity: 0;}
}
img:nth-child(1) {
animation-delay: 42s;
}
img:nth-child(2) {
animation-delay: 36s;
}
img:nth-child(3) {
animation-delay: 30s;
}
img:nth-child(4) {
animation-delay: 24s;
}
img:nth-child(5) {
animation-delay: 18s;
}
img:nth-child(6) {
animation-delay: 12s;
}
img:nth-child(7) {
animation-delay: 6s;
}
img:nth-child(8) {
animation-delay: 0s;
}

.stop img:nth-child(1) {
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 36s;animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-delay: 0s;animation-play-state: paused;
}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;
background: url(https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1675558738284829.gif)0 0/50%50%,radial-gradient(circle 672px at 50% 50%, rgba(146, 254, 157, 0) 29%,rgba(255, 14, 0, 0.82) 100%);
animation: bh 6s infinite linear;
}

@keyframes bh {0% {
opacity: 1;clip-path:polygon(0 0, 0 100%, 100% 100%, 0% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
50% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 100% 100%, 0 0);filter:hue-rotate(360deg);
-webkit-transform:translate(0%,0%)scale(1);}

80% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
-webkit-transform:translate(0%,0%)scale(1);}
100% {
opacity: 1;clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
-webkit-transform:translate(0%,0%)scale(1);}
}

</style >
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=260540901&.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/648408cabf20c4655c3eb32a84893b46.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/4c7ef7af54065bcd017bcc13e214207e.jpg" />
<img alt="" class="photo"src="https://www.kumeiwp.com/sub/filestores/2023/02/02/19c9f45206f6f64759dc830d6dc86cb5.jpg" />
<img alt=""class="photo"src="https://www.kumeiwp.com/sub/filestores/2023/02/05/5927de67e7926ddc3e5d3cc2314e39de.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/be8344391339f448193565c593076320.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/0096f3ca64524d35e535e5f4c01ece34.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/7d72de6bf18b678741be4431eaf6f145.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/6eb62dad1fe487cead64a5165eabffd1.jpg" />
</div>
<div id='ganguang' > </div>

<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </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:85%; 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: #000078;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(50deg, #ffff00, #ff0000, #fff000, #00ff00);
   background-position: 0px 0;
    -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
   0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
   
}
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:5%; 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)}
100%{transform: rotate(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 lrc = ` 为情所伤(DJ 豪大大版)-庄心妍
词：镜喜
曲：祁隆
你说不会在爱情里犯错
也说过会永远的爱我
才发现只剩下虚伪的承诺
用泪水把回忆包裹
我也曾经想把爱去闪躲
可摆脱不了那份寂寞
结果都是让我一错再错
被伤过的心再次漂泊
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
你说不会在爱情里犯错
也说过会永远的爱我
才发现只剩下虚伪的承诺
用泪水把回忆包裹
我也曾经想把爱去闪躲
可摆脱不了那份寂寞
结果都是让我一错再错
被伤过的心再次漂泊
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
为什么爱留下难忍的伤
心里的酸楚要去遗忘
看见的是一道封闭的墙
什么时候能打开一扇窗
为什么爱留下难忍的伤
泪水无情拍打着海浪
谁能给我一双温暖的桨
不让我 再为情所伤
`;

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');
ganguang.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>ganguang.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>ganguang.style.animationPlayState = 'paused');
</script >
<script>
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>



马黑黑 发表于 2023-2-5 10:15

欣赏美帖，祝元宵快乐

庶民 发表于 2023-2-5 10:20

元宵祝福月正圆

海笑 发表于 2023-2-5 10:37

欣赏老师佳作！

醉美水芙蓉 发表于 2023-2-5 10:41

红影 发表于 2023-2-5 10:49

蝴蝶飞飞，好漂亮的变色音画。欣赏亚伦老师好帖，祝元宵节快乐{:4_187:}

小辣椒 发表于 2023-2-5 11:19

亚伦这个全屏效果很漂亮，就是加分要重新刷新

小辣椒 发表于 2023-2-5 11:21

欣赏精彩的制作，辛苦了

樵歌 发表于 2023-2-5 13:11

美女如蝶儿翩翩，在节日里欣赏更觉得开心！
元宵快乐！

梦缘 发表于 2023-2-5 14:55

很好看很好听，欣赏问好！{:4_171:}
页: [1]
查看完整版本: 为情所伤(DJ 豪大大版)-庄心妍