论坛 › 欢乐水吧 › 沙漠骆驼 - 璐潞

亚伦影音工作室 发表于 2023-4-23 20:58

沙漠骆驼 - 璐潞

<style>
#papa { margin: 10px -320px ; width: 1240px; height: 700px; background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/01dc3f76201b3d6832084edc7db23440.jpg)0 0/100%100%; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 1; 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;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;
}

@keyframes round {        0% {
          opacity: 0;
          animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          transform: scale(1);
          animation-timing-function: ease-out;
        }
        17% {
          opacity: 1;
          transform: scale(1);
        }
        22% {
                opacity: 0;
                -webkit-transform: scale(1.4);
        }
        25% {
          opacity: 0;
          -transform: scale(1.4);
        }
        100% { opacity: 0 }
}

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(8deg)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/music72958016.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >

<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d43a0d2dde57777c0480.jpg" />
<img alt="" class="photo"src="https://pic1.imgdb.cn/item/6444d5080d2dde57777d5fb9.jpg" />
<img alt=""class="photo"src="https://pic1.imgdb.cn/item/6444d4d30d2dde57777d1213.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4d20d2dde57777d1027.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4d20d2dde57777d0f34.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4d10d2dde57777d0dba.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4d10d2dde57777d0d0c.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4890d2dde57777c91b8.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d4880d2dde57777c9088.jpg" />
<img alt="" class="photo"src="https://pic1.imgdb.cn/item/6444d4870d2dde57777c8dee.jpg" />
<img alt=""class="photo"src="https://pic1.imgdb.cn/item/6444d4000d2dde57777b8f07.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d3ff0d2dde57777b8e4c.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d3770d2dde57777a9157.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d37a0d2dde57777a9614.jpg" />
<img alt="" class="photo" src="https://pic1.imgdb.cn/item/6444d3ff0d2dde57777b8d66.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 = `沙漠骆驼 - 璐潞
我要穿越这片沙漠
找寻真的自我
身边只有一匹骆驼陪我
这片风儿吹过
那片云儿飘过
突然之间出现爱的小河
我跨上沙漠之舟
背上烟斗和沙漏
手里还握着一壶烈酒
漫长古道悠悠
说不尽喜怒哀愁
只有那骆驼奔忙依旧
什么鬼魅传说
什么魑魅魍魉妖魔
只有那鹭鹰在幽幽的高歌
漫天黄沙掠过
走遍每个角落
行走在无尽的苍茫星河
白天黑夜交错
如此妖娆婀娜
蹉跎着岁月又蹉跎了自我
前方迷途太多
坚持才能洒脱
走出黑暗就能逍遥又快活
我寻找沙漠绿洲
出现海市蜃楼
我仿佛看到她在那里等候
想起了她的温柔
滚烫着我的胸口
迷失在昨夜的那壶老酒
我穿上大头皮鞋
跨过凛冽荒野
我仿佛穿越到另一个世界
阿拉丁神灯要倾斜
天堂地狱已然重叠
突然之间飞来一只蝴蝶
什么鬼魅传说
什么魑魅魍魉妖魔
只有那鹭鹰在幽幽的高歌
漫天黄沙掠过
走遍每个角落
行走在无尽的苍茫星河
白天黑夜交错
如此妖娆婀娜
蹉跎着岁月又蹉跎了自我
前方迷途太多
坚持才能洒脱
走出黑暗就能逍遥又快活
我已坠入在这神奇的国度
驼铃相伴走向圣堂之路
原谅我曾经恍惚陷入迷途
遮住了眼眸
湮没了意图
怎能被这样征服
什么鬼魅传说
什么魑魅魍魉妖魔
只有那鹭鹰在幽幽的高歌
漫天黄沙掠过
走遍每个角落
行走在无尽的苍茫星河
白天黑夜交错
如此妖娆婀娜
蹉跎着岁月又蹉跎了自我
前方迷途太多
坚持才能洒脱
走出黑暗就能逍遥又快活
梦里回到最初
浪潮起起伏伏
彷徨着未来又彷徨着孤独
漫长人生旅途
花开花落无数
沸腾的时光怎能被荒芜
清晨又到日暮
天边飞鸟群逐
摇曳着苍穹又描摹着黄土
东方鱼肚白出
烈日绽放吐露
放下尘浮我已踏上归途
`;

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-23 21:11

蛮漂亮的制作。赞！

红影 发表于 2023-4-23 23:13

前面几张那女子和骆驼在一起的图图非常震撼，这个制作真美。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 沙漠骆驼 - 璐潞