学习克隆《最美风景线》

一师

[i=s] 本帖最后由 一师 于 2022-4-14 19:02 编辑 [/i]

一师

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:  rotate(0deg);background: url(http://chuangshicdn.data.mvbox.c ... 417263445440463.gif)0 0/30%  30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'  src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/98381166f9449ed1f9da0f1ba39eb019.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/5b5ea2579cf8d8bf3c71d4355999830e.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/ddaf957fcf550ec790c4ac7b9bea1db8.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/b0c87e183d67bd6ab04caa2dc34148b2.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/f13e4bc85d1c2ea35480976e9f068f14.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/d66fe3b8e7785f01154f875a69fe1506.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/f2af339109e7ae313e32c91778a787aa.jpg" alt="" />
<img class='photo'  src="https://img-baofun.zhhainiao.com/fs/c081a07e9c90c9faf8495709c3f6bccd.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://music.lanyes.org/content/plugins/lymusic_tool/play.php?type=kw&id=215880440&.mp3" controls loop style="width: 1%;

height: 1%;z-index: 1;"></audio>
      <div class="btn">
        <span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:-70px; left:80px;"></span>
        <span id="bf"onclick="rbf();"></span>
      </div>
<div class="img_border"><img  id="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... b6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);" ></div>
     <div class="items" >
<div  class="lrc">
        <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1000px;
  height: 600px;
  position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
  animation: round 46s infinite;
  opacity: 0;}
@keyframes round {1% {opacity: 1;clip-path:circle(0% at 130% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
9% {opacity: 1;clip-path:  circle(100% at 50%  50%);
-webkit-transform:translate(0%,0%)scale(1);}
18% {opacity: 0.6;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1.5);}
20% {opacity: 0;clip-path: circle(100% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(2);}
}
img:nth-child(8) {animation-delay: 40s;}
img:nth-child(7) {animation-delay: 34s;}
img:nth-child(6) {animation-delay: 28s;}
img:nth-child(5) {animation-delay: 22s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:0px;z-index: 100;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;z-index: 1;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px  0);
    display: block;position: absolute;top:-10px; left:0px;
    margin: 0 auto;}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 70px;
    line-height: 70px;
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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;top:-430px;left:250px;transform: scale(1,1);}
.container .img_border #aplay{display:block;border:2px solid #cccccc;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);clip-path: circle(50% at 50% 50%);background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... c35d638c3869fbb.jpg)-120px 0px/180% 100%;filter:hue-rotate(360deg)contrast(130%)brightness(100%);}
100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);clip-path: circle(50% at 50%50%);background:url(http://pan.yinhuabbs.cn/view.php ... 12d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com ... b6a5d3451cfadb9.jpg)-20px 0px/180% 100%;filter:hue-rotate(0deg)contrast(130%)brightness(100%);}

}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</style>
<style type="text/css">.items  { z-index: 1540;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 = `[00:04]心中最美的风景线
[00:06]作词：轻云望月
[00:09]作曲：轻云望月
[00:11]DJ：月之歌音乐室
[00:13]混音：烟圈蔓延
[00:15]出品：亚伦影音
[00:19]“未经授权禁止翻唱和商业使用”
[00:22]男：
[00:23]我不知道远方究竟有多远
[00:28]有你的地方就是我的终点
[00:33]哪怕趟万水 哪怕越千山
[00:38]也愿意奔向你和你手相牵
[00:42]女：
[00:43]我不知道红尘有多少爱恋
[00:48]自从第一眼就把你爱心间
[00:53]人为你相思 心为你牵绊
[00:58]再多曲折都难把我的爱阻断
[01:03]男：
[01:03]你是我心中最美的风景线
[01:08]感谢你出现把我人生温暖
[01:13]女：
[01:13]这一段情爱 这一场尘缘
[01:18]就算到天荒地老都不会厌倦
[01:23]男：
[01:23]你是我心中最美的风景线
[01:28]谢谢你出现把我流年惊艳
[01:33]女：
[01:34]爱着你所爱 念着你所念
[01:38]这辈子你就是我永远的永远
[02:03]男：
[02:04]我不知道红尘有多少爱恋
[02:09]自从第一眼就把你爱心间
[02:13]女：
[02:14]人为你相思 心为你牵绊
[02:19]再多曲折都难把我的爱阻断
[02:23]男：
[02:24]你是我心中最美的风景线
[02:29]感谢你出现把我人生温暖
[02:34]女：
[02:34]这一段情爱 这一场尘缘
[02:39]就算到天荒地老都不会厌倦
[02:44]男：
[02:44]你是我心中最美的风景线
[02:49]谢谢你出现把我流年惊艳
[02:53]女：
[02:54]爱着你所爱 念着你所念
[02:59]这辈子你就是我永远的永远
[03:04]男：
[03:04]你是我心中最美的风景线
[03:10]谢谢你出现把我流年惊艳
[03:14]女：
[03:15]爱着你所爱 念着你所念
[03:20]这辈子你就是我永远的永远
[03:24]合：
[03:25]这辈子你就是我永远的永远`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        var twoParts = content.split("]");
        var time = twoParts[0].substr(1);
        var timeParts = time.split(":");
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        var words = twoParts[1];
        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[index].words;
        $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
        return;
    }
    var lrc_li_height = 70, lrc_ul_height = 50;
    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[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
        function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
        }

        function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                    audio.play(); //audio.play();// 这个就是播放  
                    bf.innerText="";
                } else {
                    audio.pause(); // 这个就是暂停
                    bf.innerText="";
                }
            }
        }
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric[0]){ document.getElementById("ullrc").innerHTML = lyric[1]; if(i

+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>

一师

欢迎老师指导纠正

湛蓝

正常显示！非常好！

一师

湛蓝 发表于 2022-4-14 11:33
本帖最后由 湛蓝 于 2022-4-14 11:39 编辑
正常显示！非常好！

jpg这个是图片吗、哪里有？

最难弄的还有歌词

湛蓝

一师 发表于 2022-4-14 11:44
jpg这个是图片吗、哪里有？

最难弄的还有歌词

jpg结尾的是静态图，替换这几张图图就ok！图片是网上的，很多！

或者去摄影天地、贴图版有很多现成的图片！
只是要修改成与原图（1920x1080）一样大，否则图片可能会变形！


歌词是同步歌词！

一师

湛蓝 发表于 2022-4-14 11:50
jpg结尾的是静态图，替换这几张图图就ok！图片是网上的，很多！

或者去摄影天地、贴图版有很多现成的 ...

好的，一步一步慢慢来，别这急哦。谢谢。

幸福快乐多彩

赞赏音画《最美风景线》

巫荣云师

欣赏老师佳作。点赞！

沧海笑

欣赏老师佳作!