亚伦影音工作室 发表于 2023-2-3 12:29

你是我永远的痛(DJ何鹏版) - 崔伟立&陈瑞[可控]可全屏欣赏

本帖最后由 亚伦影音工作室 于 2023-2-3 12:50 编辑 <br /><br /><style>
#papa { margin: 10px -280px ; 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:10%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: bold 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#photos img{float:right;width:1000px;height:600px;position:relative;LEFT:0px;top:0px;overflow:hidden;border-radius:0px;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);z-index: -1;}

.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;filter:hue-rotate(360deg)}
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>

.set {
position: absolute;z-index: 1;
width: 1100px;
height: 640px;
top: 0;
left: 0;
}
.set div {
position: absolute;
display: block;
user-select: none;
}
.set div img {pointer-events: none;
max-width: 90px;
max-height: 120px;
}
.set div:nth-child(1) {
left: 20%;
animation: animate 15s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(3) {
left: 70%;
animation: animate 25s linear infinite;
}
.set div:nth-child(4) {
left: 0%;
animation: animate 15s linear infinite;
animation-delay: -5s;
}
.set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite;
animation-delay: -10s;
}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite;
animation-delay: -7s;
}
.set div:nth-child(7) {
left: 60%;
animation: animate 14s linear infinite;
animation-delay: -7s;
}




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

@keyframes animate {
0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
}
10% {
    opacity: 1;
}
20% {
    transform: translateX(-20px) rotate(45deg);
}
40% {
    transform: translateX(-20px) rotate(90deg);
}
60% {
    transform: translateX(-20px) rotate(135deg);
}
80% {
    transform: translateX(-20px) rotate(180deg);
}
100% {
    top: 110%;
    transform: translateX(-20px) rotate(225deg);
}
}
.set2 {
transform: scale(2) rotateY(180deg);
filter: blur(2px);
}

.set3 {
transform: scale(0.8) rotateY(30deg);
filter: blur(4px);
}
</style>
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music41510269.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/02/3295f5c9ebd5f999c6bae779d2fef4c0.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/02/0f427507d7a30e64fa5789474f0b80c6.jpg" /><img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/8216643937411b12f221cd2a78c7746e.jpg" /><img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/6f071fe1c4443115f25748000b929be1.jpg" /><img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/4f61a8846065e0d271cbb5b44fc121ff.jpg" /><img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/02/24d72bf0228ad4744b08635b082f39af.jpg" />

<div class="set">
    <div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>
<div class="set set2">
    <div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>
<div class="set set3">
    <div><img src="https://i.postimg.cc/90FhMGh5/589b1fd02096a705e895cd6e.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/L5scR2tm/Autumn-Leaf-PNG-Clip-Art-2012.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/8zvqTy6f/Autumn-Maple-Leaf-PNG-Clip-Art-1973.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/bJg7Ks26/Red-Autumn-Leaf-PNG-Clip-Art-2117.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/Nf53zGG4/Yellow-Leaf-PNG-Clip-Art-2011.png" alt=""/></div>
    <div><img src="https://i.postimg.cc/HLD15Ggt/Yellow-Autumn-Leaf-PNG-Clip-Art-2119.png" alt=""/></div>
</div>

</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: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: #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:10%; 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(250%);}
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何鹏版) - 崔伟立&陈瑞
词：崔伟立
曲：崔伟立
编曲：崔伟立
吉他：李凯稠
和声：樊桐舟
缩混：啊KEN
出品：亚伦影音工作室
男：城市耀眼的霓虹
街上行人太匆匆
我就伫立在风中
痴痴傻傻把你等
想想过去泪翻涌
想想未来太朦胧
望着灰色的天空
多想能把你再次触碰
女：你是我心中永远的痛
你是我不可触摸的梦
朝思暮想你不在我身边
酒再烈心依然会冷
你是我今生永远的痛
只能到来世再把你相拥
我们的过去永远过不去
就让所有往事都随风
男：城市耀眼的霓虹
街上行人太匆匆
我就伫立在风中
痴痴傻傻把你等
想想过去泪翻涌
想想未来太朦胧
望着灰色的天空
多想能把你再次触碰
女：你是我心中永远的痛
你是我不可触摸的梦
朝思暮想你不在我身边
酒再烈心依然会冷
你是我今生永远的痛
只能到来世再把你相拥
我们的过去永远过不去
就让所有往事都随
女：你是我心中永远的痛
你是我不可触摸的梦
朝思暮想你不在我身边
酒再烈心依然会冷
你是我今生永远的痛
只能到来世再把你相拥
我们的过去永远过不去
就让所有往事都随风
就让所有往事都随风
就让所有往事都随风`;

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');

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


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

</script >


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



梦缘 发表于 2023-2-3 13:47

很漂亮的播放器，欣赏问好！{:4_187:}

小辣椒 发表于 2023-2-3 14:15

亚伦这个全屏效果做的不错{:4_178:}

海笑 发表于 2023-2-3 14:15

欣赏老师佳作！

小辣椒 发表于 2023-2-3 14:17

就是加分后，点击没有效果了，要重新刷新才行

小辣椒 发表于 2023-2-3 14:21

图图logo怎么不去了，影响界面效果

小辣椒 发表于 2023-2-3 14:21

冬雨分享过N次的歌曲{:4_199:}

亚伦影音工作室 发表于 2023-2-3 15:48

小辣椒 发表于 2023-2-3 14:15
亚伦这个全屏效果做的不错

个个元素的调整，都要用用百分比，不然位置不能全屏。

红影 发表于 2023-2-3 15:50

漂亮的制作，点击花朵播放器后，所有的动画都停止了。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2023-2-3 16:53

亚伦影音工作室 发表于 2023-2-3 15:48
个个元素的调整，都要用用百分比，不然位置不能全屏。

图片logo最好去了，我们制作视频背景都会把logo隐藏掉

庶民来了 发表于 2023-2-3 20:11

动感十足，让人陶醉
页: [1]
查看完整版本: 你是我永远的痛(DJ何鹏版) - 崔伟立&陈瑞[可控]可全屏欣赏