其实是一张图《最爱的姑娘 - 李子杰》用马黑老师代码改编
本帖最后由 亚伦影音工作室 于 2022-7-1 23:39 编辑 <br /><br /><style>.papa { left: -322px; width: 1200px; height: 580px; border-radius: 6px; background: tan url('https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg') no-repeat center/cover;transform: rotateY(0deg); }
.papa::after { left: 50%; background: tan url('https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg') no-repeat center/cover; transform: rotateY(180deg); }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotateY(-180deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox {position: absolute; left: calc(30% - 130px); top: 450px; padding: 10px; font: normal 1em sans-serif; color: #FF0000; border-radius: 8px; overflow: hidden; z-index: 1; }
.playbox::before { position: absolute;text-align: center;left: 0; top: 0px; right: 0; bottom: 0; z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #eee; color: #ff0000; }
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
</style>
<style type="text/css">.items1{ animation: slider1 4s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<div class="items1"><div class="papa"></div>
<div class="playbox">
<div class="items"><p id="geci"style="font-family:华文隶书;font-size: 2.8em;text-align: center;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 Loading ... </p> </div>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 30px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per"style="color: #eeeeee;font-size: 1.4em">0%</span>
</p>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=3375070" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['0.00','最爱的姑娘 - 李子杰'],
['6.00','词：李子杰'],
['12.00','曲：李子杰'],
['18.00','编曲：李子杰'],
['24.00','百花丛中一枝玫瑰'],
['28.00','在我眼中你最美'],
['33.00','飘过的云儿 流过的水'],
['38.00','月光下你笑的多甜美'],
['43.00','让我的爱和你一起飞'],
['47.00','我要给你幸福和安慰'],
['52.00','你的美丽 让我心陶醉'],
['57.00','我要和你今生相依相随'],
['62.00','最爱的姑娘就是你'],
['67.00','你的微笑那么甜蜜'],
['72.00','最爱的姑娘就是你'],
['77.00','我要用一生去爱你'],
['81.00','最爱的姑娘就是你'],
['86.00','你的微笑那么甜蜜'],
['91.00','最爱的姑娘就是你'],
['95.00','我要用一生去爱你'],
['119.00','百花丛中一枝玫瑰'],
['124.00','在我眼中你最美'],
['128.00','飘过的云儿 流过的水'],
['133.00','月光下你笑的多甜美'],
['138.00','让我的爱和你一起飞'],
['142.00','我要给你幸福和安慰'],
['147.00','你的美丽 让我心陶醉'],
['152.00','我要和你今生相依相随'],
['158.00','最爱的姑娘就是你'],
['163.00','你的微笑那么甜蜜'],
['167.00','最爱的姑娘就是你'],
['172.00','我要用一生去爱你'],
['177.00','最爱的姑娘就是你'],
['182.00','你的微笑那么甜蜜'],
['186.00','最爱的姑娘就是你'],
['191.00','我要用一生去爱你'],
['196.00','最爱的姑娘就是你'],
['200.00','你的微笑那么甜蜜'],
['205.00','最爱的姑娘就是你'],
['210.00','我要用一生去爱你'],
['215.00','最爱的姑娘就是你'],
['219.00','你的微笑那么甜蜜'],
['224.00','最爱的姑娘就是你'],
['228.00','我要用一生去爱你']
];
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>
马黑老师未经同意改编两处：.papa::before { background: tan url('https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg') no-repeat center/cover;transform: rotateY(0deg); }
.papa::after { left: 50%; background: tan url('https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg') no-repeat center/cover; transform: rotateY(180deg); }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotateY(-180deg); } 用一张图图去做效果也很棒呢，图片里的姑娘真美{:4_187:} 好有创意！也是一个编程高手。 厉害啊，这个姑娘我也爱{:4_173:} 绿叶清舟 发表于 2022-7-2 11:12
厉害啊，这个姑娘我也爱
克隆了马老师的代码，稍加改动！ 亚伦影音工作室 发表于 2022-7-2 15:03
克隆了马老师的代码，稍加改动！
也是代码高手啊，向你学习了 亚伦影音工作室 发表于 2022-7-1 22:08
马黑老师未经同意改编两处：.papa::before { background: tan url('https://img-baofun.zhhainiao.com/fs/0 ...
可以随意的，充分发挥想象力，做出极致
页:
[1]