论坛 › 欢乐水吧 › 可全屏《我的楼兰》绝版

亚伦影音工作室 发表于 2023-2-6 20:42

可全屏《我的楼兰》绝版

本帖最后由 亚伦影音工作室 于 2023-2-6 20:42 编辑 <br /><br /><style>
#papa { margin: 10px -230px ; 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:5%; 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-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;}
@keyframes round{0% {opacity: 0;}
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-play-state: paused;}
.stop img:nth-child(2) {animation-play-state: paused;}
.stop img: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;}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;}
.span {
width: 20vmin;
height: 20vmin;
border-radius: 40vmin;
backface-visibility: hidden;
position: absolute;
animation-name: move;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;}
.span:nth-child(1) {
color: #E45A84;
top: 38%;
left: 90%;
animation-duration: 14.4s;
animation-delay: -7.3s;
transform-origin: 8vw -20vh;
box-shadow: 40vmin 0 7.5825118355vmin currentColor;
}
.span:nth-child(2) {
color: #E45A84;
top: 85%;
left: 44%;
animation-duration: 13.9s;
animation-delay: -15.3s;
transform-origin: -23vw 19vh;
box-shadow: -40vmin 0 7.0535658472vmin currentColor;
}
.span:nth-child(3) {
color: #E45A84;
top: 31%;
left: 94%;
animation-duration: 14.4s;
animation-delay: -14s;
transform-origin: -10vw -19vh;
box-shadow: -40vmin 0 6.3282530813vmin currentColor;
}
.span:nth-child(4) {
color: #583C87;
top: 32%;
left: 72%;
animation-duration: 11.1s;
animation-delay: -11s;
transform-origin: 22vw 3vh;
box-shadow: 40vmin 0 9.0598358039vmin currentColor;
}
.span:nth-child(5) {
color: #E45A84;
top: 60%;
left: 8%;
animation-duration: 15s;
animation-delay: -10.5s;
transform-origin: 5vw -1vh;
box-shadow: -40vmin 0 13.3208706669vmin currentColor;
}
.span:nth-child(6) {
color: #ff0000;
top: 90%;
left: 48%;
animation-duration: 13.6s;
animation-delay: -5.2s;
transform-origin: 24vw 15vh;
box-shadow: 40vmin 0 15.7532629644vmin currentColor;
}
.span:nth-child(7) {
color: #583C87;
top: 59%;
left: 28%;
animation-duration: 11s;
animation-delay: -11.5s;
transform-origin: -20vw 18vh;
box-shadow: -40vmin 0 11.9539838986vmin currentColor;
}
.span:nth-child(8) {
color: #E45A84;
top: 48%;
left: 52%;
animation-duration: 14.3s;
animation-delay: -3.9s;
transform-origin: 9vw 10vh;
box-shadow: -40vmin 0 9.0533535457vmin currentColor;
}
.span:nth-child(9) {
color: #583C87;
top: 44%;
left: 59%;
animation-duration: 13.5s;
animation-delay: -12.7s;
transform-origin: 19vw -11vh;
box-shadow: 40vmin 0 6.6089531139vmin currentColor;
}
.span:nth-child(10) {
color: #E45A84;
top: 43%;
left: 64%;
animation-duration: 11.1s;
animation-delay: -6s;
transform-origin: 9vw 0vh;
box-shadow: -40vmin 0 5.726542192vmin currentColor;
}
.span:nth-child(11) {
color: #FFACAC;
top: 59%;
left: 95%;
animation-duration: 10.8s;
animation-delay: -3.9s;
transform-origin: 9vw -15vh;
box-shadow: -40vmin 0 11.0535574125vmin currentColor;
}
.span:nth-child(12) {
color: #583C87;
top: 70%;
left: 97%;
animation-duration: 12.6s;
animation-delay: -3.5s;
transform-origin: -21vw -24vh;
box-shadow: -40vmin 0 12.463832706vmin currentColor;
}
.span:nth-child(13) {
color: #E45A84;
top: 52%;
left: 91%;
animation-duration: 14.6s;
animation-delay: -11.4s;
transform-origin: -15vw 13vh;
box-shadow: -40vmin 0 13.9327650237vmin currentColor;
}
.span:nth-child(14) {
color: #00ff00;
top: 50%;
left: 1%;
animation-duration: 10.4s;
animation-delay: -7.8s;
transform-origin: 24vw 0vh;
box-shadow: -40vmin 0 12.7768318488vmin currentColor;
}
.span:nth-child(15) {
color: #FFACAC;
top: 60%;
left: 29%;
animation-duration: 12.8s;
animation-delay: -7.7s;
transform-origin: 7vw -15vh;
box-shadow: 40vmin 0 5.7092398504vmin currentColor;
}
.span:nth-child(16) {
color: #FFACAC;
top: 48%;
left: 100%;
animation-duration: 13.5s;
animation-delay: -3s;
transform-origin: -22vw 2vh;
box-shadow: 40vmin 0 7.8329143448vmin currentColor;
}
.span:nth-child(17) {
color: #E45A84;
top: 20%;
left: 63%;
animation-duration: 11.8s;
animation-delay: -1.9s;
transform-origin: 12vw -20vh;
box-shadow: -40vmin 0 8.4443044151vmin currentColor;
}
.span:nth-child(18) {
color: #000060;
top: 29%;
left: 50%;
animation-duration: 16s;
animation-delay: -1.2s;
transform-origin: 20vw -8vh;
box-shadow: -40vmin 0 10.8986254969vmin currentColor;
}
.span:nth-child(19) {
color: #583C87;
top: 2%;
left: 80%;
animation-duration: 14.7s;
animation-delay: -8.1s;
transform-origin: -7vw -2vh;
box-shadow: -40vmin 0 12.9483961237vmin currentColor;
}
.span:nth-child(20) {
color: #fff000;
top: 93%;
left: 35%;
animation-duration: 10.8s;
animation-delay: -1s;
transform-origin: -1vw 5vh;
box-shadow: -40vmin 0 13.4811190658vmin currentColor;
}

@keyframes move {
100% {
    transform: translate3d(0, 0, 1px) rotate(360deg)scale(1.2);
}
}
.stop .span {animation-play-state: paused;}
.stop .span:nth-child(1) {animation-play-state: paused;}
.stop .span:nth-child(2) {animation-play-state: paused;}
.stop .span:nth-child(3) {animation-play-state: paused;}
.stop .span:nth-child(4) {animation-play-state: paused;}
.stop .span:nth-child(5) {animation-play-state: paused;}
.stop .span:nth-child(6) {animation-play-state: paused;}
.stop .span:nth-child(7) {animation-play-state: paused;}
.stop .span:nth-child(8) {animation-play-state: paused;}
.stop .span:nth-child(9) {animation-play-state: paused;}
.stop .span:nth-child(10){animation-play-state: paused;}
.stop .span:nth-child(11){animation-play-state: paused;}
.stop .span:nth-child(12){animation-play-state: paused;}
.stop .span:nth-child(13){animation-play-state: paused;}
.stop .span:nth-child(14){animation-play-state: paused;}
.stop .span:nth-child(15){animation-play-state: paused;}
.stop .span:nth-child(16){animation-play-state: paused;}
.stop .span:nth-child(17){animation-play-state: paused;}
.stop .span:nth-child(18){animation-play-state: paused;}
.stop .span:nth-child(19){animation-play-state: paused;}
.stop .span:nth-child(20){animation-play-state: paused;}
</style >
<div id="papa">
<audio id="MusicPlayer" src="https://365.tf/disk/tf/1675700249.mp3" autoplay loop></audio>
<div id="fullscreen">全屏观赏</div>
<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/05/4c7ef7af54065bcd017bcc13e214207e.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/05/5927de67e7926ddc3e5d3cc2314e39de.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/be8344391339f448193565c593076320.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/0096f3ca64524d35e535e5f4c01ece34.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/7d72de6bf18b678741be4431eaf6f145.jpg" />
<img alt="" class="photo" src="https://www.kumeiwp.com/sub/filestores/2023/02/05/6eb62dad1fe487cead64a5165eabffd1.jpg" />
<div id='ganguang' >
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
<m class="span"></m>
   <m class="span"></m>
<m class="span"></m>
    <m class="span"></m>
    <m class="span"></m>
   <m class="span"></m></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:85%; 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:5%; 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>

<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 = `http://bbs.cnzv.cc/ 歌词外链
云朵 - 我的楼兰 (并四版)
作曲：刀郎
想问沙漠借那一根曲线
缝件披风为你御寒
用肺腑去触摸你的灵魂
我就在那只火炉边取暖
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着你
长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着你
优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
想问沙漠借那一根曲线
缝件披风为你御寒
用肺腑去触摸你的灵魂
我就在那只火炉边取暖
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着你
长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着你
优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着你
长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着你
优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
`;

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

红影 发表于 2023-2-6 21:46

这个帖子和前面那个楼兰发重了吧？

小辣椒 发表于 2023-2-6 22:12

红影 发表于 2023-2-6 21:46
这个帖子和前面那个楼兰发重了吧？

有2个啊？我去看看

红影 发表于 2023-2-6 23:13

小辣椒 发表于 2023-2-6 22:12
有2个啊？我去看看

还有个是这个，
感光全控HTML5音画《云朵 - 我的楼兰 (并四版)》
https://www.huachaowang.com/forum.php?mod=viewthread&tid=66348&fromuid=2
(出处: 花潮论坛)
觉得和这个帖子貌似重复了{:4_173:}

亚伦影音工作室 发表于 2023-2-6 23:26

红影 发表于 2023-2-6 21:46
这个帖子和前面那个楼兰发重了吧？

那个是打包成HTML，不能全屏欣赏！

庶民 发表于 2023-2-7 05:30

精彩点赞

海笑 发表于 2023-2-7 09:54

欣赏老师佳作！

红影 发表于 2023-2-7 10:10

亚伦影音工作室 发表于 2023-2-6 23:26
那个是打包成HTML，不能全屏欣赏！

哦哦，原来是这样。知道了{:4_187:}
好听又好看。

梦缘 发表于 2023-2-7 14:57

欣赏全屏美图，感谢分享！

查看完整版本: 可全屏《我的楼兰》绝版