论坛 › 动画音画 › 人生的道场(DJ 默涵版)【可控】

亚伦影音工作室 发表于 2023-4-22 13:58

人生的道场(DJ 默涵版)【可控】

本帖最后由 亚伦影音工作室 于 2023-4-22 14:04 编辑 <br /><br /><style>
#papa { margin: 10px -320px ; width: 1260px; height: 700px; 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 ;}
#fullscreen { position: absolute; top:10%; 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;
border:3px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round{0% {opacity: 0;transform:translate(-100%,-100%)scale(0);}
4% {opacity: 1;transform:translate(0%,0%)scale(0.6)rotate(-360deg);}
5% {opacity: 1;transform:translate(0%,0%)scale(0.7)rotate(-360deg);}
7% {opacity: 1;transform: perspective(1300px) rotateY(70deg)scale(0.7)}
9% {opacity: 1;transform: perspective(1300px) rotateY(-70deg)scale(0.7)}
11% {opacity: 0;transform:translate(100%,100%) perspective(1300px)rotatex(-90deg) rotateY(-40deg)scale(3);}
}

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>

.pg{ width: 100%; height:100%; left: 0%;
position: absolute;
top: 0%; z-index: 10;overflow: hidden;perspective: 3.125vmin;}


#polygon {animation: 6s linear infinite polygon;
left: 50%;
position: absolute;z-index:10;
top: 50%;
transform-style: preserve-3d;
transform: rotatex(90deg) rotatey(0deg) translatey(-10vmin);
}
@keyframes polygon {
100% {
    transform: rotatex(90deg) rotatey(0deg) translatey(0);
}
}
.side {opacity: 1;filter:hue-rotate(10deg);/**----改变数据可显示不同光效----**/
background-image: url(https://365.tf/disk/tf/1676481764.png);
background-size:10vmin 25%;
filter: hue-rotate(80deg)brightness(850%);
height: 100vmin;
position: absolute;
transform-origin: 0;
width: calc(8vmin + 1px);
}
.side:nth-child(1) {
background-position: -9.94562vmin 0;
transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(2) {
background-position: -19.89124vmin 0;
transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(3) {
background-position: -29.83686vmin 0;
transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(4) {
background-position: -39.78247vmin 0;
transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(5) {
background-position: -49.72809vmin 0;
transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(6) {
background-position: -59.67371vmin 0;
transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(7) {
background-position: -69.61933vmin 0;
transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(8) {
background-position: -79.56495vmin 0;
transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(9) {
background-position: -89.51057vmin 0;
transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(10) {
background-position: -99.45618vmin 0;
transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(11) {
background-position: -109.4018vmin 0;
transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(12) {
background-position: -119.34742vmin 0;
transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(13) {
background-position: -129.29304vmin 0;
transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(14) {
background-position: -139.23866vmin 0;
transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(15) {
background-position: -149.18428vmin 0;
transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
}
.side:nth-child(16) {
background-position: -159.12989vmin 0;
transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
}

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

<img alt="" class="photo" src="https://365.tf/disk/tf/1676447573.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676460238.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676473345.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676383211.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676420707.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676438603.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676393369.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676451864.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676392055.jpg" />
<img alt="" class="photo"src="https://365.tf/disk/tf/1676436325.jpg" />
<img alt=""class="photo"src="https://365.tf/disk/tf/1676409961.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676413260.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676421148.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676449988.jpg" />
<img alt="" class="photo" src="https://365.tf/disk/tf/1676439398.jpg" />
</div>

<div class="pg"> <div id="bnt">
<div id="polygon"><div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div></div></div> </div>
   <div class="lrc">
      <div class="p"> <liid="ullrc" >
          </li>
      </div>
    </div>
</div>

<style>
#btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:90%; left:10%;
        z-index: 10;
    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: 3em;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%);}
   
}

</style>
<script >
var lrc = `人生的道场(DJ 默涵版)
演唱：魏佳艺
词：聂小慧
曲：聂小慧
编曲：王亚东
吉他：杨春
和声：乔秀芬
混音/母带：王亚东
宣发：阿宇/开心
监制：米奇
制作人：亚伦
推广：亚伦影音
OP：亚伦影音工作室
恩恩怨怨这人生的道场
来来回回为名利而奔忙
多多少少怀念最初的模样
无奈人生有太多的荒唐
纷纷扰扰这人生的道场
反反复复为情字而思量
停停走走追忆美好的时光
无奈岁月染白发苍苍
在这人生的道场
看尽世间的悲凉
一副冠冕堂皇装人模狗样
在这人生的道场
谁不想风风光光
却有人只能在回忆里迷茫
恩恩怨怨这人生的道场
来来回回为名利而奔忙
多多少少怀念最初的模样
无奈人生有太多的荒唐
纷纷扰扰这人生的道场
反反复复为情字而思量
停停走走追忆美好的时光
无奈岁月染白发苍苍
在这人生的道场
看尽世间的悲凉
一副冠冕堂皇装人模狗样
在这人生的道场
谁不想风风光光
却有人只能在回忆里迷茫
在这人生的道场
看尽世间的悲凉
一副冠冕堂皇装人模狗样
在这人生的道场
谁不想风风光光
却有人只能在回忆里迷茫
`;

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("bnt");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
polygon.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => polygon.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => polygon.style.animationPlayState = 'paused');

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

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

红影 发表于 2023-4-22 19:11

看到了一个个轮播的美人图，没看到按钮，不过点击背景能暂停。欣赏亚伦老师好帖{:4_187:}

梦缘 发表于 2023-4-22 19:29

欣赏老师的精彩分享，感谢分享！{:4_187:}

亚伦影音工作室 发表于 2023-4-22 20:09

红影 发表于 2023-4-22 19:11
看到了一个个轮播的美人图，没看到按钮，不过点击背景能暂停。欣赏亚伦老师好帖

设计的就是点背景，暂停！

红影 发表于 2023-4-22 23:15

亚伦影音工作室 发表于 2023-4-22 20:09
设计的就是点背景，暂停！

哦哦，是这样啊，我还满世界找按钮呢{:4_173:}

查看完整版本: 人生的道场(DJ 默涵版)【可控】