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

悲伤的落叶 - 刘振宇【可控】

本帖最后由 亚伦影音工作室 于 2025-4-6 21:22 编辑 <br /><br /><style>#ptpt{ margin: 10px -300px ; width: 1170px; 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)}
#ptpt:hover #fullscreen { display:block ;}
#fullscreen {position: absolute;top:5%; left:85%; color: snow; font: bold 2em华文隶书; opacity: 1; cursor: pointer; z-index: 10}
#papa {width: 50%;
height: 50%;z-index: 1;
position: absolute;}

.photo {width: 100%;
height: 100%;z-index: 1;
position: absolute;
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: 1;transform: translate(0%,0%)scale(0.8)rotateX(0deg)rotateY(0deg);clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}
3% {
opacity: 1;transform: translate(0%,0%)scale(0.8)rotateX(0deg)rotateY(0deg);
}
6% {
opacity: 1;transform:rotateZ(45deg) scale(0.7)translate(80%,-35%)rotatex(180deg);clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
10% {
opacity: 1;transform:rotateX(10deg) scale(0.7)translate(-30%,35%)rotate(360deg);clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
12% {opacity: 1;transform:rotateZ(0deg) scale(0.8)translate(0%,0%)rotate(0deg);clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);}
18% { opacity: 0;transform:rotateZ(0deg) scale(0.8)translate(0%,0%)rotate(0deg);clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);}
}

img:nth-child(8) {background:url(http://pan.yinhuabbs.cn/view.php/0491d81f74c969bf1888c6ad1244b8fb.jpg)0 0/100% 100%;
animation-delay: 42s;
}
img:nth-child(7) {background:url(http://pan.yinhuabbs.cn/view.php/5702c7dfb5d8e06ddae5b89856ec1505.jpg)0 0/100% 100%;
animation-delay: 36s;
}
img:nth-child(6) {background:url(http://pan.yinhuabbs.cn/view.php/fab29a57fdfbbb4d6efae0e1bd52c544.jpg)0 0/100% 100%;
animation-delay: 30s;
}
img:nth-child(5) {background:url(http://pan.yinhuabbs.cn/view.php/44e3037872f82bfe8de3b8066d64c777.jpg)0 0/100% 100%;
animation-delay: 24s;
}
img:nth-child(4) {background:url(http://pan.yinhuabbs.cn/view.php/0ffa7ca02b8fccfe832fbd5a2e2bf808.jpg)0 0/100% 100%;
animation-delay: 18s;
}
img:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg)0 0/100% 100%;
animation-delay: 12s;
}
img:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg)0 0/100% 100%;
animation-delay: 6s;
}
img:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5cfdd51f048ee177d3be11ec2cd9aadf.jpg)0 0/100% 100%;
animation-delay: 0s;
}
.stop img:nth-child(8) {
animation-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(7){
animation-delay: 36s;animation-play-state: paused;
}
.stopimg:nth-child(6){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(3){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(2) {
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(1) {
animation-delay: 0s;animation-play-state: paused;
}
</style>

<audio id="MusicPlayer" src="https://s2.ananas.chaoxing.com/sv-w7/audio/ef/06/3c/2e53a7051e1da330537b864669cdf30f/audio.mp3" autoplay loop></audio>
<div id="ptpt">
<div id="testImg">
<div id="papa" style="position: absolute;LEFT:0px;top:0px;"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>

<div id="papa" style="position: absolute;LEFT:585PX;top:0px;transform:rotateY(-180deg);"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>

<div id="papa" style="position: absolute;LEFT:0px;top:320PX;transform:rotateX(180deg);"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>

<div id="papa" style="position: absolute;LEFT:585px;top:320px;transform:rotateY(-180deg)rotateX(180deg);"><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>
</div>
<div id="main" >
<div id="stars"></div>
</div>
<div id="fullscreen">全屏观赏</div>

<div class="bfbj">
<divid="btn">
<div id="img_border"></div></div>
   <div class="lrc">
         <liid="ullrc" >
          </li>
      </div>
</div>
</div>

<style>
#main {
position: relative;
overflow: hidden;
width: 100%; z-index: 1;
min-height: 98vh;
perspective: 430px;}
.stop #main {animation-play-state: paused;}
#stars {
position: absolute;z-index: 1;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #fff000, 193px -376px #fff000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #ff0000, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #ff0000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #ff0000, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00f000,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: fly 2s linear infinite;
transform-style: preserve-3d;
}

#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}

#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}

@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.8;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0.2;
}
to {
    opacity: 0.8;
}
}
</style>

<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)}
100%{transform: rotate(0deg);}
}
</style>

<script >
var lrc = ` 悲伤的落叶 - 刘振宇
词：孙英勇
曲：孙英勇
编曲：孙培喜
和声：贺佩莉
混音：Neil
制作人：张晔
出品人：张晔
录制者：广东飞碟文化传播有限公司
眼泪淋湿了寒夜
洒落在寂静的街
温度急剧骤跌
将回忆冻结
往事渐渐的重叠
心里落下一场雪
覆盖相爱岁月
淹没了誓约
风吹的凛冽
只有片刻停歇
吹落枝头的秋叶
转身就抛却 诀别
心在泣血染红整个世界
已变得残缺
像风的离开只留下悲伤的落叶
我望着你的不辞而别心仿佛撕裂
又不得不妥协
可思念的感觉强烈
风吹的凛冽
只有片刻停歇
吹落枝头的秋叶
转身就抛却 诀别
心在泣血染红整个世界
已变得残缺
像风的离开只留下悲伤的落叶
我望着你的不辞而别心仿佛撕裂
又不得不妥协
可思念的感觉强烈
心在泣血染红整个世界
已变得残缺
像风的离开只留下悲伤的落叶
我望着你的不辞而别心仿佛撕裂
又不得不妥协
可思念的感觉强烈`;
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 = '退出全屏', ptpt.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>


红影 发表于 2023-2-3 23:53

好奇特的图片变幻方式，真漂亮的制作。欣赏亚伦老师好帖{:4_187:}

庶民 发表于 2023-2-4 05:29

精美的制作，点赞
页: [1]
查看完整版本: 悲伤的落叶 - 刘振宇【可控】