论坛 › 动画音画 › 一生只爱你一次(DJ 默涵版)【复古放映机效果】

亚伦影音工作室 发表于 2023-3-30 21:02

一生只爱你一次(DJ 默涵版)【复古放映机效果】

本帖最后由 亚伦影音工作室 于 2023-4-3 15:22 编辑 <br /><br /><style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background: linear-gradient(132deg, rgba(13, 34, 237, 0.41) 0%,#1a2a6c 33%,#b21f1f 82%,#F20411 100%);
        box-shadow: 3px 3px 2px #000;
        position: relative;overflow: hidden;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#tp {position: absolute;box-shadow: 0px 0px 0px 1px #000000, 0px 0px 10px 13px #cccccc;
        left: 520px;border-radius: 1%;z-index: 2;
        top: 18%;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b273937938b1acfa3df3283fd40141c7.jpg') center/cover no-repeat;
        width: 560px;transform:perspective(600px) rotate(-1deg)rotateY(-10deg)scale(1);
        height: 340px;opacity: 0.7;}
.photo {width: 100%; height: 100%;
position: absolute;
top:0px; left:0px;filter:contrast(140%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 32s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round {1% {
opacity: 1;clip-path:circle(10% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}

4% {
opacity: 1;clip-path:circle(30% at 50% 50%);
-webkit-transform:translate(0%,0%)}
8% {
opacity: 1;clip-path: circle(50% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}

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

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

.photo:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f8b2a6523a38c3c6c61be0ac6501d6e9.jpg)0 0/100% 100%;
animation-delay: 28s;
}
.photo:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/29c50e716edbe7f5bd4004c1fae3a5cc.jpg)0 0/100% 100%;
animation-delay: 24s;
}
.photo:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c8eff17a7a0d1132a001fc899d9d51e4.jpg)0 0/100% 100%;
animation-delay: 20s;
}
.photo:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d56f2dfc5ee58313cd2c9113ae2beed.jpeg)0 0/100% 100%;
animation-delay: 16s;
}
.photo:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a8fa482d66a757a54c2abd72ef68243a.jpg)0 0/100% 100%;
animation-delay: 12s;
}
.photo:nth-child(6) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/17f43572bffffec2c3a21152d05598bc.jpg)0 0/100% 100%;
animation-delay: 8s;
}
.photo:nth-child(7) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/148ac3256a463f25a0bc67fc74722d9f.jpg)0 0/100% 100%;
animation-delay: 4s;
}
.photo:nth-child(8) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9ffc373a1dadbf420296df3f08fad75f.jpg)0 0/100% 100%;
animation-delay: 0s;
}

.stop img:nth-child(1) {
animation-play-state: paused;
}
.stop img:nth-child(2){
animation-play-state: paused;
}
.stopimg: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;
}




#vid { display: none; }
#canv {position: absolute;
        display: block;
        left: 0%; mix-blend-mode: soft-light;
        top: 0%;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;
        left:5%;
        bottom: 200px;
        width: 40px;
        height: 30px;
        border: 2px solid #bbbbbb;
        border-radius: 10%;
        opacity: 0.2;transform:perspective(80px) rotateY(15deg)rotate(-5deg)scale(1);
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #bbbbbb;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left:40%;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #bbbbbb;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;left:40%;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
<div id="tp"><div id="testImg"><img class='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div></div>
        <canvas id="canv"></canvas>
        <div id="testBtn"> <div id="mplayer"></div></div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music261198661.mp3" loop autoplay></audio>
<video id="vid" src="https://www.kumeiwp.com/sub/filestores/2023/03/29/77eb63d2a8e740063d49b905d2c9fdb1.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width =1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

<script >
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
            this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 3;
        left: 50%;
        transform: translate(50%);
        top: 62%;transform:perspective(100px) rotate(3deg)rotateY(-10deg)scale(1);
        font:normal 1.8em 华文行楷;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;left: 0%;
        height: 100%;top: 0%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `一生只爱你一次(DJ 默涵版)
作词：宋樸
作曲：灰色幽默
监制：梦瑶
出品：王婷婷
联合宣发：亚伦影音工作室
出品：亚伦传媒
演唱：梅伊伊
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
吞了爱的痴情药 见你那一秒
想你想到睡不着 想把你依靠
心中有把火在烧 烧到天破晓
是你的微笑让我想甩甩不掉
祈愿天荒和地老 天涯和海角
就算窗外风雨飘 有你就静好
向全世界去宣告 心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
祈愿天荒和地老 天涯和海角
就算窗外风雨飘 有你就静好
向全世界去宣告 心只为你跳
我要陪你在人间幸福到老
一生我只爱你一次一次爱你一生
你是往后余生的路程
我不要天地为我见证 我只要你感动
我要做你四季的春风
一生我只爱你一次一次爱你一生
你是锁住爱情的牢笼
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
我的心无时无刻沸腾 爱你有始无终
和你相拥这片红尘中
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

红影 发表于 2023-3-30 21:16

前面一个画面不动的，这个在屏幕上有图片轮播，做得更漂亮了。欣赏言论老师好帖{:4_187:}

小辣椒 发表于 2023-3-30 21:40

哇塞~~亚伦速度的，现在这个画面感非常好{:4_199:}

小辣椒 发表于 2023-3-30 21:41

这个隐藏小播用这里真不错{:4_178:}

小辣椒 发表于 2023-3-30 21:42

但是你这个代码有错误，画面体现出来的 图形变形了

小辣椒 发表于 2023-3-30 21:44

哈哈~~~还得修改{:4_170:}

查看完整版本: 一生只爱你一次(DJ 默涵版)【复古放映机效果】