论坛 › 动画音画 › 年少的你啊-浩然H.R

亚伦影音工作室 发表于 2023-10-25 21:33

年少的你啊-浩然H.R

本帖最后由 亚伦影音工作室 于 2023-11-4 10:53 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1164px;
        height: 640px;
        background:#000000 ;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:93%; left:3%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 12px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:85%;}

#prog {position: absolute;z-index: 91;
      width: 76%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:94.5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#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%);}}
#bt{ --w: 65%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:54%;top:91%;font-size: 16px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen">全屏</span>
<div id="mb"></div>
<div id="bt">亚伦音画工作室出品 年少的你啊-浩然H.R</div>
<div id="t"><img id="tu" src="https://www.yiyuen.com/e/file/view/640577" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://www.yiyuen.com/e/file/view/640576" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music270878947.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;pointer-events: none;
    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 -1px0);
    display: block;position: absolute;top:81%; left:0%;z-index: 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: 40px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `年少的你啊-浩然H.R
作词：羊羊羊
作曲：午卜率
编曲：小海
制作人：SW 艾斯基
和声设计：阿比giao
和声：紫妍
混音/母带：青
宣发：张丹娴/廖文婷
统筹：唐欣宇
出品人：胡伟
OP：深圳启韵文化传媒有限公司
青春的公车
越过荒野和山坡
追逐少年的梦想
做最自由的光
理想的模样
身着朴素的衣裳
翻过城门与高墙
走最自由那一趟
你啊借那风越海峡
一路坎坷总要去经历它
我们翻过山遇晚霞
去寻无人知晓的花
你啊再黑也别害怕
萤火月光做引路的灯塔
我们风作伴梦作马
追啊迎啊最热烈的年华
青春的公车
越过荒野和山坡
追逐少年的梦想
做最自由的光
理想的模样
身着朴素的衣裳
翻过城门与高墙
走最自由那一趟
你啊借那风越海峡
一路坎坷总要去经历它
我们翻过山遇晚霞
去寻无人知晓的花
你啊再黑也别害怕
萤火月光做引路的灯塔
我们风作伴梦作马
追啊迎啊最热烈的年华
你啊借那风越海峡
一路坎坷总要去经历它
我们翻过山遇晚霞
去寻无人知晓的花
你啊再黑也别害怕
萤火月光做引路的灯塔
我们风作伴梦作马
追啊迎啊最热烈的年华
你啊借那风越海峡
一路坎坷总要去经历它
我们翻过山遇晚霞
去寻无人知晓的花
你啊再黑也别害怕
萤火月光做引路的灯塔
我们风作伴梦作马
追啊迎啊最热烈的年华
`;
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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

冬天的雨 发表于 2023-10-25 21:55

这个视频背景制作感觉画面效果不错{:4_178:}

冬天的雨 发表于 2023-10-25 21:55

很奇怪，这个视频背景效果，怎么要这么多代码？

冬天的雨 发表于 2023-10-25 21:59

看了一下不是视频背景，是动图{:4_178:}

冬天的雨 发表于 2023-10-25 22:00

动图好，手机可以看见

红影 发表于 2023-10-25 22:41

漂亮的制作，好听的歌曲。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 年少的你啊-浩然H.R