定制精品相册音画《崔伟立、孙艺琪 - 最美的爱情 (DJ默涵版)》一键可控 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2023-9-25 10:49

定制精品相册音画《崔伟立、孙艺琪 - 最美的爱情 (DJ默涵版)》一键可控

本帖最后由亚伦影音工作室于 2023-9-25 23:29 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
width: 1164px;
height: 640px;
background:linear-gradient(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 30%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%), linear-gradient(135deg, #880000 0%,#000080 60%,#00ff00 100%);
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode:lighten;}
#mplayer {position: absolute; left: 0%;top:90%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%) ;opacity: 1;}

#lrc {
   --motion: cover2;
   --tt: 2s;
   --state: paused;
   position: absolute;
top: 80%;
z-index: 12;
   font: normal 2.6em 微软雅黑;
left: 50%;
   transform: translate(-50%);
   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%;
   height: 100%;
   color: transparent;
   overflow: hidden;
   white-space: pre;
   background: #ff0000;
-webkit-background-clip: text;
   animation: var(--motion) var(--tt) linear forwards;
   animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0;filter: hue-rotate(360deg); } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; filter: hue-rotate(360deg);} }
#fullscreen { position: absolute; top:5%; left:calc(85% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>

<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<div class="book-wrap" id="testImg">
<div class="page " > </div>
<div class="pagebook-content1"> </div>
<div class="pagebook-content2" > </div>
<div class="page book-content3"> </div>
<div class="pagebook-content4" > </div>
<div class="pagebook-content5" > </div>
<div class="pagebook-content6"> </div>
<div class="pagebook-content7"> </div>
<div class="pagebook-content8" > </div>
<div class="page book-content9"> </div>
</div>
<div id='dt' ><img id="Img" src="https://pic.imgdb.cn/item/64f84335661c6c8e54f84cc0.gif" width="100%" height="100%"></div>
<div id="mplayer" ><audiostyle="width:100%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music300313267.mp3" type="audio/mpeg"></audio></div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
</div>

<script>
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `
崔伟立、孙艺琪 - 最美的爱情 (DJ默涵版)
作词：崔伟立作曲：崔伟立
代码设计：亚伦影音工作室
LRC来源：醉美水芙蓉
女：
那天遇见你
天空下起了小雨
街上放着浪漫的歌曲
三月的天气
飘着浪漫的柳絮
你走过像是迷人的风景
你的大眼睛
像是闪烁的星星
一闪一闪绽放着光明
你给的感动
永远放在我心底
你就是我生命中的奇迹
男：
一生一世爱着你
爱到永远不分离
天涯海角都紧紧的相依
不管多少的风雨
不管多少的艰辛
抱着你何时何地不放弃
一生一世爱着你
爱到永远不分离
千里万里都一直在一起
这份完美的爱情
得到真的不容易
你是我今生最美的爱情
女：
你的大眼睛
像是闪烁的星星
一闪一闪绽放着光明
你给的感动
永远放在我心底
你就是我生命中的奇迹
男：
一生一世爱着你
爱到永远不分离
天涯海角都紧紧的相依
不管多少的风雨
不管多少的艰辛
抱着你何时何地不放弃
一生一世爱着你
爱到永远不分离
千里万里都一直在一起
这份完美的爱情
得到真的不容易
你是我今生最美的爱情
一生一世爱着你
爱到永远不分离
天涯海角都紧紧的相依
不管多少的风雨
不管多少的艰辛
抱着你何时何地不放弃
一生一世爱着你
爱到永远不分离
千里万里都一直在一起
这份完美的爱情
得到真的不容易
你是我今生最美的爱情
出品：亚伦影音工作室
`;

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

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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));
   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); /*获得歌词数组*/
})();

mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

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

</script>

<style type="text/css">

.book-wrap {width: 40%;
         height: 50%;
   position: absolute;z-index: 3;
         left: 50%;
         top: 25%;
         transform: rotatez(5deg)rotateX(20deg);
         transform-style: preserve-3d;}
.page { width: 100%;
   height: 100%;
   position: absolute;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0f9261bc02d781943f4caa27f67c2ab1.JPG)no-repeat center/cover;
   border-radius: 2px;border: 15px solid #cccccc;
   transform-origin: left;display: flex;
justify-content: center;
align-items: center;
box-shadow:0px 0px 0px 2px #000000;
   background-size:100% 100%;}

.book-content1{animation: roll4s 18s2;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ff17fabf0b4b48ae3a8e76448904914f.jpg)no-repeat center/cover}
.book-content2{animation: roll6s 16sinfinite;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)no-repeat center/cover}
.book-content3{animation: roll8s 14s1;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d5c13ab7ea44bcec304e0dbdf98d5176.jpg)no-repeat center/cover}
.book-content4{animation: roll 10s 12sinfinite;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/554c087b03f386b5058a4ed373a03de5.jpg)no-repeat center/cover}
.book-content5{animation: roll 12s 10s1;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c75105e7fc0e6a770a0d991978a40ddb.jpg)no-repeat center/cover}
.book-content6{animation: roll 14s8s2;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fa30baa3feae1a76c9d2c11eac9c743e.jpg)no-repeat center/cover}
.book-content7{animation: roll 16s6sinfinite;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6645513743e125c2be1aafac2449a40f.jpg)no-repeat center/cover}
.book-content8{animation: roll 18s4s2;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/554c087b03f386b5058a4ed373a03de5.jpg)no-repeat center/cover}
.book-content9{animation: roll 20s2s infinite;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b61defed94c21bd3107f5cab94321139.jpeg)no-repeat center/cover}

.stop .book-content {animation: roll 22s22s 1;animation-play-state: paused;}
.stop .book-content1{animation: roll4s 18s2;animation-play-state: paused;}
.stop .book-content2{animation: roll6s 16sinfinite;animation-play-state: paused;}
.stop .book-content3{animation: roll8s 14s1;animation-play-state: paused;}
.stop .book-content4{animation: roll 10s 12sinfinite;animation-play-state: paused;}
.stop .book-content5{animation: roll 12s 10s1;animation-play-state: paused;}
.stop .book-content6{animation: roll 14s8s2;animation-play-state: paused;}
.stop .book-content7{animation: roll 16s6sinfinite;animation-play-state: paused;}
.stop .book-content8{animation: roll 18s4s2;animation-play-state: paused;}
.stop .book-content9{animation: roll 20s2s infinite;animation-play-state: paused;}
   @keyframes roll {
0% {transform: rotateY(0deg);opacity: 1;}
4% {transform: rotateY(-8deg);opacity: 1;}
30% {transform: rotateY(-170deg);opacity: 1;}
40% {transform: rotateY(-178deg);opacity: 1;}
50% {transform: rotateY(-180deg);opacity: 1;}
95% {transform: rotateY(-180deg);opacity: 1;}
100% {transform: rotateY(-180deg);opacity: 0;}

}
</style>

<script>

(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'): image.classList.remove('stop');

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</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;
         // 透明度还原
         imagee.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 imagee = document.getElementById("Img");
let mState = () => aud.paused ? imagee.stop():imagee.play();
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script>

亚伦影音工作室 发表于 2023-9-25 11:08

音乐，动画，动图一键可控。当然你也可以添加视频作为背景，同样也可一键控制.欢迎克隆仿制！

梦油发表于 2023-9-25 11:21

欣赏佳作，问候亚伦。

醉美水芙蓉 发表于 2023-9-25 11:56

世外桃源 发表于 2023-9-25 12:24

{:4_199:}

欣赏欣赏

小辣椒 发表于 2023-9-25 15:26

亚伦影音工作室发表于 2023-9-25 11:08
音乐，动画，动图一键可控。当然你也可以添加视频作为背景，同样也可一键控制.欢迎克隆仿制！

亚伦很棒，前几天看见他们发的书本翻页效果停止按钮书本翻页没有停止的，今天最新效果出来了{:4_199:}

小辣椒 发表于 2023-9-25 15:27

不知道书本页面本来就是动图会一键停止吗？

小辣椒 发表于 2023-9-25 15:27

谢谢亚伦的精彩分享

亚伦影音工作室 发表于 2023-9-25 15:53

小辣椒发表于 2023-9-25 15:27
不知道书本页面本来就是动图会一键停止吗？
这个就是css动画没有啥高级的，完全可以一键控制！
需要加添控制动画代码！

小辣椒 发表于 2023-9-25 15:55

亚伦影音工作室发表于 2023-9-25 15:53
这个就是css动画没有啥高级的，完全可以一键控制！

那页面是动图可以一键停止？

亚伦影音工作室 发表于 2023-9-25 16:03

加动图得有控件，你刚才发给我的祝福贴就是控制动图插件！

亚伦影音工作室 发表于 2023-9-25 16:05

本帖最后由亚伦影音工作室于 2023-9-25 16:13 编辑

小辣椒发表于 2023-9-25 15:55
那页面是动图可以一键停止？
我有时间发给你一简单的控制动图的代码！这个动的蝴蝶就是动图！当然有缺陷停止后回到第一帧。如果想控制任意一帧，就得做一个蒙太奇长图，说白就是将动图分解，链接成长图，太麻烦。不去尝试！

小辣椒 发表于 2023-9-25 16:06

亚伦影音工作室发表于 2023-9-25 16:05
我有时间发给你一简单的控制动图的代码！

好的，只是我最近玩的少，所以你不用急的，慢慢来好了

小辣椒 发表于 2023-9-25 16:07

亚伦影音工作室发表于 2023-9-25 16:03
加动图得有控件，你刚才发给我的祝福贴就是控制动图插件！

那个就一个图片，这个书本许多图片是每个要加吗？

小辣椒 发表于 2023-9-25 16:11

多图片一键停止。我上次做的4个图片就要关联4个代码的，所以这么多页面要加许多的。。。。？

亚伦影音工作室 发表于 2023-9-25 16:17

本帖最后由亚伦影音工作室于 2023-9-25 16:18 编辑

小辣椒发表于 2023-9-25 16:11
多图片一键停止。我上次做的4个图片就要关联4个代码的，所以这么多页面要加许多的。。。。？
不需一个一个加，要在html区域里加一个代码，然后在sj加一个插件就是好了！

世外桃源 发表于 2023-9-25 16:53

欣赏欣赏

辫子哥哥 发表于 2023-9-25 17:40

个个精品{:4_199:}

辫子哥哥 发表于 2023-9-25 17:40

也是高手的{:4_199:}

红影发表于 2023-9-26 12:08

非常漂亮的翻页效果，欣赏亚伦老师好帖{:4_199:}

页: [1]

花潮论坛's Archiver

定制精品相册音画《崔伟立、孙艺琪 - 最美的爱情 (DJ默涵版)》一键可控