牵手 - 小阿枫 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-1-10 23:17

牵手 - 小阿枫

本帖最后由亚伦影音工作室于 2024-4-16 10:15 编辑 <br /><br /><style>
#papa {margin: 150px -310px;
width: 1168px;
height: 640px;
background:#000000 url('https://')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left:0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1;}
.photo {width: 50%; height: 55%;
position: absolute;box-shadow: 0px 0px 0px 1px #000000, 0px 0px 12px 2px #eeeeee;
z-index: 2;border-radius: 5%;-webkit-transform:translate(0%,0%)perspective(950px)scale(1) rotateY(-35deg)rotate(-5deg);
top:18%; left:42%;
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;}
3% {opacity: 1;}
7% {opacity: 1;}
8% {opacity: 0;}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/500973da07ef4d9ebddaefb5b56e6a67.jpg')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/eb7b83e282fe67c0f61cb9bc6fe291b0.jpg)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fabeed103c30461fa6c3c22fb6613871.jpg)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/1d2b2876ef799bd97d46007a4b773b16.jpg)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/72e068878be4573ae855bd59d8e652f8.jpg)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/05e03cd761ca7e30ed32c1e4a7444253.jpg)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d280992afe26365c47baf19395b2d76b.jpg)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/687042359a46d37a4d038ee7cfd4c907.jpg)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9ab52bcf02910ba19e6c32fa2d05d0f0.jpg)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5ec51cf34ba3a5a6e25541b398cd8050.jpg)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7c3e6475ea1b5dd667014af6cc842e35.jpg')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/77b2110349b12444a35ef146e7064f15.jpg')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
#dt{position: absolute;width: 50%; height: 55%; top:15%; left:42%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 2;border-radius: 5%;-webkit-transform:translate(0%,0%)perspective(850px)scale(1) rotateY(-35deg);z-index:3;mix-blend-mode: difference;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:94%; left:50%;
bottom: 20px;
width: 30px;
height: 15px;background:#333333;
border: 0px solid #000000;
border-radius: 10%;
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: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 12px;
border-width: 5px 8px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
   font: normal 10px sans-serif;
   color: #00ff00;
      top:94%;
   left:74%;}

#prog {position: absolute;z-index: 91;
   width: 20%;
   height: 0.6%;
   cursor: pointer;
      top:95%;

box-shadow: 0px 0px 1px 1px #cccccc;
      left:53%;border-radius: 2px;}
#musickrc{width:45%;line-height:30px;position: absolute;position: absolute;left:50%;top:62%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);-webkit-transform:translate(0%,0%)perspective(100px)scale(1) rotate(2deg);}
#musickrc span {display:block;text-align:center; }
#bt{ width: 15%; height: 50px;color: #ffffff; position: absolute; left:36%;top:94%;font-size: 14px; font-family:仿宋;z-index: 21;}
</style>

<div id="papa">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/659d4bdf871b83018aafa20f.gif" width="100%" height="100%"></div>
<video id="vid"src="http://chuangshicdn.data.mvbox.cn/music/yc/24/01/10/24011022311496281138.mp4" muted autoplay loop></video>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:center;font-weight: ;font-family:华文隶书;font-size: 30px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
<div id="bt">牵手 - 小阿枫</div>
</div>
<audio id="aud" src="https://bzgz.club/view.php/85adfb352acc3e3260a25d90704dbe7d.mp3" loop autoplay></audio>
<script >
var songkrc =`牵手 - 小阿枫
词：李子恒
曲：李子恒
编曲：胡晨
制作人：小阿枫
吉他：潘春宇
混音/母带处理：胡晨
OP：
因为爱着你的爱
因为梦着你的梦
所以悲伤着你的悲伤
幸福着你的幸福
因为路过你的路
因为苦过你的苦
所以快乐着你的快乐
追逐着你的追逐
也许牵了手的手
前生不一定好走
也许有了伴的路
今生还要更忙碌
所以牵了手的手
来生还要一起走
所以有了伴的路
没有岁月可回头
因为誓言不敢听
因为承诺不敢信
所以放心着你的沉默
去说服明天的命运
没有风雨躲得过
没有坎坷不必走
所以安心的牵你的手
不去想该不该回头
也许牵了手的手
前生不一定好走
也许有了伴的路
今生还要更忙碌
所以牵了手的手
来生还要一起走
所以有了伴的路
没有岁月可回头
所以有了伴的路
没有岁月可回头
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停播放按钮*/
(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());
})();
/*结束*/
/*进度条进度时间*/
prog.onclick = (e) => {
            aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #333333 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;
   };
/*结束*/
</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 = '';
   }
   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;
         }
   }
};
}
vid=document.querySelector('#vid');var image1 = document.getElementById("testImg");
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),image1.classList.add('stop')):(image.play(),vid.play(),image1.classList.remove('stop'))};
</script>

马黑黑 发表于 2024-1-10 23:31

精美

亚伦影音工作室 发表于 2024-1-11 05:03

马黑黑发表于 2024-1-10 23:31
精美

谢谢老师的鼓励和认可！

庶民发表于 2024-1-11 06:17

这样的好玩

马黑黑 发表于 2024-1-11 08:03

亚伦影音工作室发表于 2024-1-11 05:03
谢谢老师的鼓励和认可！

{:4_191:}

红影发表于 2024-1-11 09:20

又是一个漂亮的投影仪效果，让我们仿佛坐在电脑前看美妙的投影。真是美好享受{:4_199:}

红影发表于 2024-1-11 09:20

视频选择漂亮，歌曲好听，一键全控。欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2024-1-11 10:10

红影发表于 2024-1-11 09:20
视频选择漂亮，歌曲好听，一键全控。欣赏亚伦老师好帖

是代码切换效果！

红影发表于 2024-1-11 10:25

亚伦影音工作室发表于 2024-1-11 10:10
是代码切换效果！

嗯嗯，很赞。歌词好像不太平行，再逆时针转一点点会不会更好？{:4_204:}

世外桃源 发表于 2024-1-11 11:54

欣赏佳作感谢分享

页: [1]

花潮论坛's Archiver

牵手 - 小阿枫