本帖最后由 花简静 于 2024-3-31 18:37 编辑
<style>
#papa {
margin: 130px 0 10px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/6602e15c9f345e8d031591d4.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
z-index: 1;
}
#vid1 {
position: absolute;
width: 350px;
height: 350px;
opacity: .10;
top:451px;left:294px;
object-fit: cover;
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
z-index: 12;
opacity: .66;
}
#vid2 {
position: absolute;
width: 110%;
height: 100%;
opacity: .10;
left:-434px;
bottom:-200px;
object-fit: cover;
mix-blend-mode: screen;
pointer-events: none;
opacity: .36;
}
#mypic {
position: absolute;
width: 60px;
height: 60px;
left:440px;
top:600px;
mix-blend-mode: hard-light;
cursor: pointer;
transition: filter 1s;
animation: rot 6s infinite linear var(--state);
z-index: 10;opacity: .38;
}
#mypic:hover {
filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
#canv { position: absolute; width="300";height="300";top:480px;left:320px;z-index: 5;opacity: .58;}
@keyframes moving {
from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid1" src="" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a31400e91a.mp4" autoplay loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" title="暂停/播放" />
<canvas id="canv" width="300" height="300"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2040200174" autoplay loop></audio>
</div>
<script>
let cTimer = null;
/* 获取画笔 */
let ctx = canv.getContext('2d');
/* 函数 ：绘制矩形（指针） */
let draw_rect = (x, y, w, h, rad, color) => {
ctx.save();
ctx.fillStyle = color;
ctx.translate(150,150);
ctx.rotate(rad);
ctx.fillRect(x,y,w,h);
ctx.restore();
};
/* 函数 ：绘制圆（环） */
let draw_circle = (x,y,r,lw,color1,color2) => {
ctx.save();
ctx.fillStyle = color1;
ctx.strokeStyle = color2;
ctx.lineWidth = lw;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.restore();
};
/* 函数 ：绘制文本 */
let draw_text = (txt,x,y,color,fontsize=18,b="bold") => {
ctx.save();
ctx.translate(150,150);
ctx.font = `${b} ${fontsize}px sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline="middle";
ctx.fillStyle = color;
ctx.fillText(txt,x,y);
ctx.restore();
};
let render = () => {
/* 获取时间 */
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
ctx.clearRect(0,0,300,300); /* 每一次绘制前都衔擦除画布 */
draw_circle(150,150,140,10,'AliceBlue','SteelBlue'); /* 钟壳和钟面 */
/* 钟点 */
for(let i = 0; i < 12; i ++) {
let radian = Math.PI/180*(i*30-60);
let x = 115 * Math.cos(radian), y = 115 * Math.sin(radian);
draw_text(i+1, x, y, 'DimGray');
}
/* 刻度 */
for(let i = 0; i < 60; i ++) {
let radian = Math.PI/180*(i*6);
let x = 150 + 130 * Math.cos(radian), y = 150 + 130 * Math.sin(radian);
draw_circle(x,y,1,2,'gray','gray');
}
/* 按一定次序绘制时钟各个元素 ：确保指针、指针扣不会被遮挡 */
draw_text(`${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`,0,-50,' DimGray', 15, 'normal'); /* 日期 */
draw_text(`星期${'日一二三四五六'.substr(now.getDay(),1)}`,0,-25,'DimGray', 15, 'normal'); /* 星期 */
draw_text('HUACHAO',0,60,'DimGray'); /* Logo */
draw_rect(0, -3, 90, 6, (hDeg - 90) * Math.PI/180, 'CadetBlue'); /* 时针 */
draw_rect(0, -2, 100, 4, (mDeg - 90) * Math.PI/180, 'CadetBlue'); /* 分针 */
draw_rect(0, -1, 120, 2, (sDeg - 90) * Math.PI/180, 'CadetBlue'); /* 秒针 */
draw_circle(150,150,6,6,'white','CadetBlue'); /* 指针扣 */
requestAnimationFrame(render);
};
render();
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());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
|
发表于 2024-3-27 21:02
发表于 2024-3-27 21:08
