小辣椒 发表于 2024-1-8 22:57

梅花弄弄弄 TO：亚伦


<style>
#papa {margin: 150px -430px;
        width: 1440px;
        height: 720px;
background:url('https://xlaj.cn/assets/file/zp/20240106015310.jpg')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: 37%; height: 39%; top:12.5%; left:9%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height:100%;z-index:-1;}

#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:81.5%; left:8%;
        bottom: 25px;
        width: 20px;
        height: 20px;background:#cccccc;
        border: 2px 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: #000000;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 5px;
        border-width: 5px 8px;
        border-color: transparent transparent transparent #000000;
        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: #ffffff;
         top:81%;
      left:41%;}

#prog {position: absolute;z-index: 91;
      width: 19%;
      height: 1.0%;
      cursor: pointer;
         top:82.7%;

box-shadow: 0px 0px 1px 1px #ffffff;
         left:18%;
border-radius: 3px;}

#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%);}}

#musickrc{width:30%;line-height:25px;position: absolute;position: absolute;left:12%;top:40%;z-index: 11;filter:drop-shadow(#ffffff 0.8px 0 0)drop-shadow(#ffffff 0 0.8px 0)drop-shadow(#ffffff -0.8px 0 0) drop-shadow(#ffffff 0 -0.8px0);}
#musickrc span {display:block;text-align:center; }
</style>

<div id="papa">
<div id="dt"><img id="Img" src="https://xlaj.cn/assets/file/zp/20240106210247.gif" width="100%" height="100%"></div>

<video id="vid"src="https://lk999.oss-cn-guangzhou.aliyuncs.com/fengh.mp4" muted autoplay loop></video>
<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:left;font-weight: ;font-family:隶书;font-size: 25px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:隶书;font-size: 25px;"></P>
</div>
<div id="testImg"><div id="bt"><div id="klok"> </div></di></di>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/06/mhnnn.mp3" loop autoplay></audio>

<script >
var songkrc =`梅花弄弄弄
词：言亭   曲：马博
帖赠：亚伦
LRC编辑：小辣椒
山野间蓝的天亦空空如也
满山得红梅花开的多娇艳
牵着你的小手一起看蓝天
云朵变成你的笑脸
梅花它虽不及玫瑰的美艳
它却是山野中最强的花仙
你的冷傲像孤梅那样的干脆
想把你保护把你陪
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相遇在梅海的山间
问情是何物叫人心相连
我们一起牵手到永远.。

山野间蓝的天亦空空如也
满山的红梅花开的多娇艳
牵着你的小手一起看蓝天
云朵变成你的笑脸
梅花它虽不及玫瑰的美艳
它却是山野中最强的花仙
你的冷傲像孤梅那样的干脆
想把你保护把你陪
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相识在梅海的山间
问情是何物叫人心相
我们一起牵手到永远
梅花弄弄弄弄弄弄弄弄
我们相识在寒冷的冬天,
就算到海角就算到天边
我们一起谱写这诗篇
梅花弄弄弄弄弄弄弄弄
我们相遇在梅海的山间
问情是何物叫人心相连
我们一起牵手到永远
谢谢欣赏
`;

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 + '%, #111111 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;
      };
/*结束*/


/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/

/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/

</script>

<style>
#bt{ width: 15%; height: 50px;color: #00ff00; position: absolute; left:23%;top:5%;font-size: 22px; font-family:隶书;z-index: 21; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 50%;}
}

#klok{width: 560px; height: 100%;
-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color:#880000;
   background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
   background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
    -webkit-animation:loop 1slinearinfinite ;}
@-webkit-keyframes loop{
   50%{background-position: -400px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</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;
            // 透明度还原
            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 image= document.getElementById("Img");

mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()):(image.play(),vid.play())};
</script>

小辣椒 发表于 2024-1-8 22:59

谢谢亚伦，这个一键停止很完美，我把音乐进度修改了一下位子

亦是金 发表于 2024-1-8 23:43

问好！{:4_187:}欣赏小辣椒制作的亚伦代码帖，好听好看！我也学习制作一个！{:4_189:}

庶民 发表于 2024-1-9 06:33

这样的帖子真的让人艳羡。

马黑黑 发表于 2024-1-9 08:01

欣赏佳作

红影 发表于 2024-1-9 09:50

这个帖子很漂亮，还用了岁月的视频呢。亲爱的聪明{:4_199:}

红影 发表于 2024-1-9 09:56

视频变小后，那美女的臀部也不显得太大了{:4_170:}

撒哈拉的雨 发表于 2024-1-10 15:14

音乐节奏感很强{:4_177:}

小辣椒 发表于 2024-1-10 21:32

亦是金 发表于 2024-1-8 23:43
问好！欣赏小辣椒制作的亚伦代码帖，好听好看！我也学习制作一个！

前辈你做的肯定很漂亮的{:4_187:}

小辣椒 发表于 2024-1-10 21:32

庶民 发表于 2024-1-9 06:33
这样的帖子真的让人艳羡。

谢谢庶民欣赏，你可以套用学习做了玩玩

小辣椒 发表于 2024-1-10 21:33

马黑黑 发表于 2024-1-9 08:01
欣赏佳作

黑黑晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-1-10 21:34

红影 发表于 2024-1-9 09:50
这个帖子很漂亮，还用了岁月的视频呢。亲爱的聪明

哈哈~~亲爱的，我纯是玩玩的，主要我的动图多，就想可以学会一键停止效果

小辣椒 发表于 2024-1-10 21:35

红影 发表于 2024-1-9 09:56
视频变小后，那美女的臀部也不显得太大了

是的，岁月这个视频美女的肥臀太肥了{:4_170:}@走过岁月

小辣椒 发表于 2024-1-10 21:36

撒哈拉的雨 发表于 2024-1-10 15:14
音乐节奏感很强

哇塞~~大哥出现了，难得来花潮的，欢迎以后经常来花潮玩{:4_187:}

马黑黑 发表于 2024-1-10 22:36

小辣椒 发表于 2024-1-10 21:33
黑黑晚上好，谢谢欣赏

不客气

红影 发表于 2024-1-10 22:54

小辣椒 发表于 2024-1-10 21:34
哈哈~~亲爱的，我纯是玩玩的，主要我的动图多，就想可以学会一键停止效果

亲爱的宝库里的好东西真不少啊{:4_173:}

红影 发表于 2024-1-10 22:54

小辣椒 发表于 2024-1-10 21:35
是的，岁月这个视频美女的肥臀太肥了@走过岁月

是啊，缩小点好很多{:4_173:}

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

小辣椒 发表于 2024-1-10 21:32
谢谢庶民欣赏，你可以套用学习做了玩玩

是的，有时间玩玩这个。

走过岁月 发表于 2024-1-12 13:16

小辣椒 发表于 2024-1-10 21:35
是的，岁月这个视频美女的肥臀太肥了@走过岁月

又喊我看肥臀啊
页: [1]
查看完整版本: 梅花弄弄弄 TO：亚伦