咋称呼
<style>#mydiv {
width: 160px;
height: 80px;
color: var(--border);
text-shadow: 1px 1px 1px #000;
background: none;
border: 6px dotted var(--border);
border-radius: 80px 80px 0 0;
display: grid;
place-items: end center;
cursor: pointer;
transform: perspective(2000px) rotateY(-33deg);
--deg: 0;
--border: hsla(120,80%,40%,.6);
}
#mydiv::before {
position: absolute;
content: '';
width: 6px;
height: 78px;
background: var(--border);
border-radius: 8px;
transform-origin: center bottom;
transform: rotate(var(--deg));
}
</style>
<div id="mydiv"></div>
<script>
let go = true, rq = null;
let swing = () => {
let deg = 60 - Math.floor(Math.random()*120);
mydiv.style.setProperty('--deg',deg + 'deg');
if(go) rq = requestAnimationFrame(swing);
}
mydiv.addEventListener('click', () => {
go = !go;
if(!go) {
cancelAnimationFrame(rq);
return;
}
rq = requestAnimationFrame(swing);
});
swing();
</script>
代码
<style>
#mydiv {
position: absolute;
top: 60px;
left: 60px;
width: 160px;
height: 80px;
color: var(--border);
text-shadow: 1px 1px 1px #000;
background: none;
border: 6px dotted var(--border);
border-radius: 80px 80px 0 0;
display: grid;
place-items: end center;
cursor: pointer;
transform: perspective(2000px) rotateY(-33deg);
--deg: 0;
--border: hsla(120,80%,40%,.6);
}
#mydiv::before {
position: absolute;
content: '';
width: 6px;
height: 78px;
background: var(--border);
border-radius: 8px;
transform-origin: center bottom;
transform: rotate(var(--deg));
}
</style>
<div id="mydiv"></div>
<script>
let go = true, rq = null;
let swing = () => {
let deg = 60 - Math.floor(Math.random()*120);
mydiv.style.setProperty('--deg',deg + 'deg');
if(go) rq = requestAnimationFrame(swing);
}
mydiv.addEventListener('click', () => {
go = !go;
if(!go) {
cancelAnimationFrame(rq);
return;
}
rq = requestAnimationFrame(swing);
});
swing();
</script>
本帖最后由 马黑黑 于 2023-3-12 16:51 编辑
这里面涉及到：
一、CSS画半圆的方法
首先，元素的宽高尺寸，一个为另一个的一半，比如，宽为160，则高为80；其次，设置好 border-radius 值，请参考第 12 行代码；最后，根据需要设计背景色和（或）边框。
二、用元素的一个为伪元素是做指针（20-29行）
三、使用 JS 驱动指针在一定角度之间来回转动（本例是在 -60~ 60deg 之间），JS调用的是请求关键帧动画方法，速度很快，晃眼看上去好像有三四根指针在晃动。 这个跟制作时钟的方式差不多。 庶民 发表于 2023-3-12 18:14
这个跟制作时钟的方式差不多。
比时钟简单多了 好玩，我来给个名称：指针疯了{:4_170:} 红影 发表于 2023-3-12 18:55
好玩，我来给个名称：指针疯了
{:4_172:} 醉美水芙蓉 发表于 2023-3-12 19:50
转速比秒表还快！
可以控制
页:
[1]