论坛 › 欢乐水吧 › 最后的枫叶(DJ何鹏版) - 陈瑞

亚伦影音工作室 发表于 2024-10-29 12:38

最后的枫叶(DJ何鹏版) - 陈瑞

本帖最后由 亚伦影音工作室 于 2024-10-29 12:38 编辑 <br /><br /><style type="text/css">
#papa { margin: 130px -230px ; width: 1100px; height: 640px; background: linear-gradient(80deg, #000080, #000090, #000, #800); 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:4%; left:85%;color:#FFf;font: normal 2em楷体; opacity: 1; cursor: pointer; z-index: 10}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
.photo {width: 60%;
height: 60%;box-shadow: 0px 0px 0px 1px #000, 0px 0px 0px 4px #fff;
position: absolute;z-index: -2;
top:20%; left:20%;
opacity: 0;
animation: round 48s linear infinite;
}

@keyframes round {0% {opacity: 0;transform:translate(0%,0%)}
8% {opacity: 1;transform:translate(0%,0%)}
15% {opacity: 1;transform:translate(0%,0%)}
18% {opacity: 0;transform:translate(200%,0%)rotate(360deg)}
}
.photo:nth-child(1) {background:#000 url(https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg)no-repeat center/cover;
animation-delay: 42s;
}
.photo:nth-child(2) {background:#000 url(https://pic.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(3) {background:#000 url(https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(4) {background:#000 url(https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(5) {background:#000 url(https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(6) { background:#000 url(https://pic.imgdb.cn/item/6713a87cd29ded1a8ccbc781.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(7) { background:#000 url(https://pic.imgdb.cn/item/670dff64d29ded1a8cdd9bc0.jpg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(8) { background:#000 url(https://pic.imgdb.cn/item/6703de90d29ded1a8c9375b8.webp)no-repeat center/cover;
animation-delay: 0s;
}
.stop .photo:nth-child(1),.stop .photo:nth-child(2),.stop .photo:nth-child(3),.stop .photo:nth-child(4),.stop .photo:nth-child(5),.stop .photo:nth-child(6),.stop .photo:nth-child(7),.stop .photo:nth-child(7),
.stop .photo:nth-child(8) {animation-play-state: paused;}
</style>
<style type="text/css">.set {
position: absolute;z-index: 1;
width: 100%;
height: 100%;
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),.stop .set div:nth-child(2),.stop .set div:nth-child(3),.stop .set div:nth-child(4),.stop .set div:nth-child(5),.stop .set div:nth-child(6),.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);
}
.lrc{z-index: 10;
    width: 90%;
    height: 180px;
    overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px0);
    display: block;position: absolute;top:90%; left:5%;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 44px;
    color: #800080;
text-align: center;
}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
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>
<div id="papa">
<audio autoplay="" id="aud" loop="" src="https://s2.ananas.chaoxing.com/sv-w7/audio/31/5c/8e/c94454681bc93212751bc46d6cd20d50/audio.mp3">&nbsp;</audio>
<span id="fullscreen">全屏观赏</span>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div id="testImg">
<div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div>
<div class="set">
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a69d29ded1a8c52e978.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/672060cad29ded1a8cdcb563.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a5ad29ded1a8c52da2b.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e28d29ded1a8cda38be.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e5fd29ded1a8cda6a8d.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f13d29ded1a8cdb1f0c.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png" /></div>
</div>

<div class="set set2">
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a69d29ded1a8c52e978.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/672060cad29ded1a8cdcb563.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a5ad29ded1a8c52da2b.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e28d29ded1a8cda38be.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e5fd29ded1a8cda6a8d.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f13d29ded1a8cdb1f0c.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png" /></div>
</div>
<div class="set set3">
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a69d29ded1a8c52e978.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/672060cad29ded1a8cdcb563.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/671f9a5ad29ded1a8c52da2b.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e28d29ded1a8cda38be.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205e5fd29ded1a8cda6a8d.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f13d29ded1a8cdb1f0c.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png" /></div>
</div>
</div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<script>
var image= document.getElementById("testImg");
mdiv.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')): (aud.pause(),image.classList.add('stop'));
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
/*歌词特效*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<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 = 70, 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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script>

亚伦影音工作室 发表于 2024-10-29 12:38

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

红影 发表于 2024-10-29 14:48

漂亮的图片轮播效果。欣赏亚伦老师精美作品{:4_187:}

梦油 发表于 2024-10-29 17:10

现在，欣赏红叶的人可真不少。

老谟深虑 发表于 2024-10-29 17:50

         好代码好制作，学习了！

小辣椒 发表于 2024-10-29 22:01

亚伦这个制作太漂亮了，就这个枫叶上去了三个组，这么多的枫叶飘，制作辛苦了{:4_187:}

小辣椒 发表于 2024-10-29 22:03

这个代码的制作亚伦也是花了时间的，图片转换效果加枫叶上去这么多的图片{:4_178:}

小辣椒 发表于 2024-10-29 22:04

感谢亚伦分享枫叶的png链接，小辣椒收藏了

查看完整版本: 最后的枫叶(DJ何鹏版) - 陈瑞