css3实现钟表摆动 |css修改滚动条大小

.clock {
position: relative;
width: 200px;
height: 200px;
background: #eee;
border: 10px solid #444;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 50px;
background: #000;
transform-origin: 50% 100%;
transition: transform 1s ease-in-out;
}
.hour {
transform: rotate(30deg);
}
.minute {
transform: rotate(150deg);
}
.second {
transform: rotate(270deg);
}

以上代码中，大家首先定义了一个class为.clock的样式，用来表示钟表的形状，并设置了它的位置、大小、背景颜色和边框。接着定义了一个class为.hand的样式，用来表示钟表的指针，设置了它的位置、大小、颜色和旋转中心。然后分别定义了三个类名为hour、minute和second的样式，用来表示钟表的时针、分针和秒针，通过rotate函数指定了它们的初始旋转角度。最后，通过transition属性来设置钟表指针的缓动效果，使得它们能够实现摆动的效果。

通过这样的方式，大家就可以实现一个简单的钟表摆动的效果了。当然，如果大家想要实现更加复杂的动画效果，如钟表数码跳动等，也可以通过CSS3来实现。CSS3的动画功能为大家提供了更加丰富的创作空间，让大家可以更加灵活地控制网站的样式和动态效果。