论坛 › 欢乐水吧 › 归途有风

醉美水芙蓉 发表于 2023-2-7 22:09

归途有风

本帖最后由 醉美水芙蓉 于 2023-2-7 22:15 编辑 <br /><br /> <style>
#papa { margin: 10px -250px ; 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-delay: 42s;animation-play-state: paused;
}
.stop img:nth-child(2){
animation-delay: 36s;animation-play-state: paused;
}
.stopimg:nth-child(3){
animation-delay: 30s;animation-play-state: paused;
}
.stop img:nth-child(4){
animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(5){
animation-delay: 18s;animation-play-state: paused;
}
.stop img:nth-child(6){
animation-delay: 12s;animation-play-state: paused;
}
.stop img:nth-child(7) {
animation-delay: 6s;animation-play-state: paused;
}
.stop img:nth-child(8) {
animation-delay: 0s;animation-play-state: paused;
}
</style>
<style type="text/css">
#ganguang {width: 100%;
height: 100%;
position: absolute;top:0px; left:0px;z-index: 1;
background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/50%50%,radial-gradient(circle 672px at 50% 50%, rgba(146, 254, 157, 0) 10%,rgba(255, 14, 0, 0.82) 100%);
animation: bh 6s infinite linear;
}

@keyframes bh {
0% {
opacity: 1;clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%,50% 0%);
-webkit-transform:translate(0%,0%)scale(1);}
40% {
opacity: 1;clip-path:polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);

-webkit-transform:translate(0%,0%)scale(1);}
80% {
opacity: 1;clip-path:polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
-webkit-transform:translate(0%,0%)scale(1);}
100% {
opacity: 1;clip-path:polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);

-webkit-transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)}
}

</style >
<div id="papa">
<audio id="MusicPlayer" src="https://www.qqmc.com/mp3/music261177792.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bfa76cbd1f1e2eddc46db16a303c6b84.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/42014cb258802bb1fe7bc96506aedee3.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/0b52f0a14a42b5a27908b8fd529751aa.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ed4b6ee533ebd898170be807e7baa52b.jpeg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/2a708f2e123048f03f482eb324b2212a.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/0e9f44edbd2902404627111bac79f316.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/e280633e8ff81bfa215065607cd24ed1.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/0bbf4ce9f0fa09fd77d979e4f4e339c1.jpg" />
</div>
<div id='ganguang' > </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/63e25cd14757feff33b945d9.gif)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 = `归途有风
词：学松
曲：学松
编曲：李奕楠楠
制作人：一寸光年团队
录音：曲比阿且
混音/母带：张鸣利/楚郁
和声：赫拉hera
音频编辑：蔡志成
监制：王莹莹
制作公司&OP：一寸光年
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("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');



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



</script >


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

马黑黑 发表于 2023-2-7 22:53

很漂亮。全屏点不开

红影 发表于 2023-2-7 23:25

漂亮的制作，欣赏水芙蓉美女好帖{:4_187:}

庶民 发表于 2023-2-8 04:44

您的精彩，庶民来欣赏。

醉美水芙蓉 发表于 2023-2-8 06:59

马黑黑 发表于 2023-2-7 22:53
很漂亮。全屏点不开

老师说得对，不好使，有时可以全屏，有时失灵！

醉美水芙蓉 发表于 2023-2-8 07:00

红影 发表于 2023-2-7 23:25
漂亮的制作，欣赏水芙蓉美女好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2023-2-8 07:01

庶民 发表于 2023-2-8 04:44
您的精彩，庶民来欣赏。

谢谢庶民老师欣赏支持！

马黑黑 发表于 2023-2-8 07:55

醉美水芙蓉 发表于 2023-2-8 06:59
老师说得对，不好使，有时可以全屏，有时失灵！

JS没有做整合

海笑 发表于 2023-2-8 10:40

欣赏老师佳作！

醉美水芙蓉 发表于 2023-2-8 11:47

海笑 发表于 2023-2-8 10:40
欣赏老师佳作！

谢谢老师支持！

小辣椒 发表于 2023-2-8 13:13

水芙蓉制作漂亮，歌曲也是好听{:4_199:}

小辣椒 发表于 2023-2-8 13:14

全屏欣赏点击不了，亚伦的代码，亚伦是最后打包上传有全屏欣赏出来

红影 发表于 2023-2-8 15:24

醉美水芙蓉 发表于 2023-2-8 07:00
谢谢红影美女支持！

问好水芙蓉，下午好{:4_187:}

查看完整版本: 归途有风