本帖最后由 花简静 于 2024-4-1 21:31 编辑
<style>
#papa {
margin: 130px 0 10px calc(50% - 931px);
width: 1700px;
height: 900px;
background:
url('https://pic.imgdb.cn/item/6609574f9f345e8d033365ef.webp') no-repeat center/cover;
background-blend-mode: darken;
box-shadow: 3px 3px 20px #000;
position: relative;
overflow: hidden;
z-index: 1;
}
#papa:hover {
background-blend-mode: overlay;
}
#canv {
display: block;
position: absolute;
right:230px;
bottom:50px;
transform: scale(0.65);
cursor: pointer;
opacity: .56;
}
#vid1 {
position: absolute;
width: 350px;
height: 350px;
opacity: .10;
bottom:-20px;right:150px;
object-fit: cover;
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
z-index: 12;
opacity: .26;
}
#vid2 {
position: absolute;
width: 112%;
height: 100%;
opacity: .10;
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
opacity: .32;
}
</style>
<div id="papa">
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/01/60/42/63906040e1a7f.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2414777/00/02/09/5b5050e458de0.mp4" autoplay loop muted></video>
<canvas id="canv" width="200" height="200" style=""></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3934523" autoplay loop></audio>
</div>
<script>
(function() {
let rotDeg = 0, prgDeg = 0, raf;
let ctx = canv.getContext('2d');
ctx.lineWidth = 10;
ctx.lineCap = 'round';
let gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, 'DarkKhaki');
gradient.addColorStop(.5, 'orange');
gradient.addColorStop(1, 'White');
let img = new Image();
img.onload = () => mkProg();
img.src = 'https://638183.freep.cn/638183/web/svg/flower_1.svg';
let mkProg = () => {
ctx.clearRect(0, 0, 200, 200);
ctx.clearRect(0, 0, 200, 200);
//底轨圆
ctx.strokeStyle = ' #FFA500';
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
ctx.stroke();
//进度圆
ctx.save();
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
ctx.stroke();
ctx.restore();
//旋转图片
ctx.save();
ctx.translate(100, 100);
ctx.rotate(rotDeg * Math.PI/180);
ctx.translate(-100, -100);
ctx.drawImage(img, 20, 20, 160, 160);
ctx.restore();
rotDeg = (rotDeg + 1) % 360;
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);
};
let mState = () => {
aud.paused
? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause())
: (papa.style.setProperty('--state','running'),vid1.play(),vid2.play());
draw();
};
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
aud.onpause = aud.onplaying = () => mkProg();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br>
| 
