论坛 › 音乐沙龙 › 宿情 同玩岁月AE制作功放效果

小辣椒 发表于 2024-7-17 21:02

宿情 同玩岁月AE制作功放效果

<style>#papa { margin: 140px 0 20px calc(50% - 720px);
        width: 1278px;
        height: 642px;
        background:#000 url(https://xlaj.cn/assets/file/zp/20240717205302.jpg)no-repeat center/cover; box-shadow: 1px1px 3px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#ff00ff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#ff00ff 90%,black 1%);}
#t{position: absolute;top: 30px; left:120px;width: 100px; height:70px;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:71.3%; left:43%;
       
        bottom: 25px;
        width: 30px;
        height: 30px;background:#333333;
        border: 4px solid #000000;
        border-radius: 50%;
        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: #ccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0px;
        height: 0px;
        left: 12px;
        border-width: 8px 9px;
        border-color: transparent transparent transparent #ccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 5px;
        height: 14px;
                left: 8.5px;
        border-width: 0 5px 0 5px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 10px sans-serif;
      color: #cccccc;
         top:74%;
      left:56%;}

#prog {position: absolute;z-index: 91;
      width: 20.9%;
      height: 0.5%;
      cursor: pointer;
         top:68.1%;
color: #cccccc
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:33.7%;
border-radius: 2px;}


#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: 0%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:23%;top:87%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s 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"> 歌手：高淑津 - 宿情</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20240717205150.gif " width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://xlaj.cn/assets/file/zp/20240717205235.gif" 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://xlaj.cn/assets/file/zp/20240717205323.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:85%; left: -3.5%;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: 34px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `宿情
歌手： 高淑津
专辑： 《如果爱是这么简单》
发行时间： 1990-10-01
发行：扬声唱片
宿情 - 高淑津
词：郑进一
曲：郑进一      
别问我爱你有多少
其实我自己也不知道
多少深情的拥抱
如今都随风远去了
别问我想你有多少
其实你自己都知道
曾经拥有的欢笑
已随着轻烟飘去了
想的那么好
相爱爱到老
其实我们都知道做不到
就像一场梦
梦里情难了
寻寻觅觅
觅觅又寻寻
。。。。。。
别问我想你有多少
其实你自己都知道
曾经拥有的欢笑
已随着轻烟飘去了
想的那么好
相爱爱到老
其实我们都知道做不到
就像一场梦
梦里情难了
寻寻觅觅
觅觅又寻寻
想的那么好
相爱爱到老
其实我们都知道做不到
就像一场梦
梦里情难了
寻寻觅觅
觅觅又寻寻
谢谢欣赏


`;
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,#ffffff,#ffffff, #ffffff ' + aud.currentTime / aud.duration * 100 + '%, #999999 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>

小辣椒 发表于 2024-7-17 21:06

@走过岁月

同一个AE功放效果了{:4_170:}

走过岁月 发表于 2024-7-17 21:19

漂亮，小辣椒做的比我还丰富

走过岁月 发表于 2024-7-17 21:20

还有黑丝美女，赶紧喊冬雨兄先，再慢慢回

走过岁月 发表于 2024-7-17 21:21

这粒子加的也漂亮

小辣椒 发表于 2024-7-17 21:22

走过岁月 发表于 2024-7-17 21:19
漂亮，小辣椒做的比我还丰富

岁月晚上好，知道你就会鼓励小辣椒{:4_173:}

走过岁月 发表于 2024-7-17 21:22

小辣椒的制作，构想很棒，表扬一下

走过岁月 发表于 2024-7-17 21:24

小辣椒 发表于 2024-7-17 21:22
岁月晚上好，知道你就会鼓励小辣椒

确实做得精彩

小辣椒 发表于 2024-7-17 21:25

走过岁月 发表于 2024-7-17 21:20
还有黑丝美女，赶紧喊冬雨兄先，再慢慢回

哈哈~~~这个美女加了感觉画面有点色彩，其实你加的那个效果也是非常的美，只是怕大家说你美臀{:4_170:}

走过岁月 发表于 2024-7-17 21:27

小辣椒 发表于 2024-7-17 21:25
哈哈~~~这个美女加了感觉画面有点色彩，其实你加的那个效果也是非常的美，只是怕大家说你美臀

哈哈，矜持一点

绿叶清舟 发表于 2024-7-17 21:28

辣椒这个功放太逼真了，厉害啊

小辣椒 发表于 2024-7-17 21:30

走过岁月 发表于 2024-7-17 21:21
这粒子加的也漂亮

这个粒子我有也是很喜欢的{:4_189:}

红影 发表于 2024-7-17 21:30

很漂亮的音响效果，亲爱的还加了那么多漂亮的元素，这个制作太赞了{:4_199:}

小辣椒 发表于 2024-7-17 21:31

走过岁月 发表于 2024-7-17 21:22
小辣椒的制作，构想很棒，表扬一下

谢谢岁月，没有你的我哪里构思啊，

小辣椒 发表于 2024-7-17 21:33

走过岁月 发表于 2024-7-17 21:27
哈哈，矜持一点

其实感觉大家都喜欢你做的美臀{:4_170:}

小辣椒 发表于 2024-7-17 21:34

绿叶清舟 发表于 2024-7-17 21:28
辣椒这个功放太逼真了，厉害啊

清舟好，这个是岁月AE制作我二次制作仿制一个{:4_173:}

小辣椒 发表于 2024-7-17 21:36

红影 发表于 2024-7-17 21:30
很漂亮的音响效果，亲爱的还加了那么多漂亮的元素，这个制作太赞了

亲爱的，这个功劳主要是岁月的，否则我也是做不出来

红影 发表于 2024-7-17 22:06

小辣椒 发表于 2024-7-17 21:36
亲爱的，这个功劳主要是岁月的，否则我也是做不出来

那些效果加得好啊，这个制作太漂亮了{:4_187:}

竹溪 发表于 2024-7-17 22:11

漂亮的功放器，非常真实。

小辣椒 发表于 2024-7-19 20:26

竹溪 发表于 2024-7-17 22:11
漂亮的功放器，非常真实。

问好竹溪，谢谢欣赏{:4_187:}

查看完整版本: 宿情 同玩岁月AE制作功放效果