外观
Skip to content
CSS实现钟表效果
一、CSS之Transform
1.1、用法示例
/* Keyword values */
transform: none;
/_ Function values _/
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
/_ Multiple function values _/
transform: translateX(10px) rotate(10deg) translateY(5px);
/_ Global values _/
transform: inherit;
transform: initial;
transform: unset;1.2、坐标轴/方向
x轴正方向为向右方向，y轴正方向为向下方向，z轴正方向为垂直纸面向外。将右手拇指指向坐标轴正方向上，旋转的正方向与其余四指的方向为反方向。 举例：
- translateX(10px)表示在x轴正方向上移动10px，即向右移动10px。
- translateY(10px)表示在y轴正方向上移动10px，即向下移动10px。
- translateZ(10px)表示在z轴正方向上移动10px，即垂直纸面向里移动10px。
- rotateZ(10deg)表示顺指针方向选择10deg，即右手拇指指向Z轴正方向（垂直纸面向外），向与四指相反的方向旋转10度。
- rotateY(10deg)表示将一个矩形的左边垂直纸面向外，右侧垂直纸面向里，这样子旋转10度。
- rotateX(10deg)表示将一个矩形的上面垂直纸面向里，下面垂直纸面向外，这样子旋转10度。
二、CSS之Animation
2.1、子属性
animation-name：动画名称。一般跟在@keyframes关键词后面。 animation-duration：指定动画完成一个循坏所需的时间。 animation-timing-function：指定动画执行的节奏。 animation-delay：指定动画的延迟时间。 animation-iteration-count：指定动画被执行的次数，可以通过infinite来指定无限循环。 animation-direction：指定是要正向播放动画还是反向播放动画。
- normal：正向播放。
- reverse：反向播放。
- alternate：先正向播放，再反向播放，再正向播放，以此类推。
- alternate-reverse：先反向播放，再正向播放，再反向播放，以此类推。
animation-fill-mode：指定在动画开始前或结束后是否要应用动画的样式。
- none：不会应用动画的样式。
- forwards：应用动画最后一帧的样式。
- backwards：应用动画第一帧的样式。
animation-play-state：动画的播放状态（暂停播放、恢复播放）。
- paused：暂停播放。
- running：恢复播放。
2.2、使用示例
分开写：
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}简写：
p {
animation: 3s infinite alternate slidein;
}三、实现钟表效果
问题：写一段HTML+CSS，实现一个钟，里面有时针、分针、秒针在旋转。 代码实现（为方便查看效果，转速提高了100倍，比如秒针转一圈实际需要60s，在这里我们设定的是0.6秒转一圈）：
<html>
<head>
<style>
.clock {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid #000;
transform: translate(-50%, -50%);
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
}
.pointer {
position: absolute;
left: 0;
transform: rotateZ(-90deg);
height: 0px;
animation: animation_rotate 864s linear infinite;
}
.hour {
animation-duration: 864s;
width: 40px;
border-top: 6px solid #000;
top: -3px;
transform-origin: 3px 0%;
}
.minute {
animation-duration: 36s;
width: 60px;
border-top: 4px solid #0f0;
top: -2px;
transform-origin: 2px 0%;
}
.second {
animation-duration: 0.6s;
width: 80px;
border-top: 2px solid #00f;
top: -1px;
transform-origin: 1px 0%;
}
@keyframes animation_rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="center">
<div class="pointer hour"></div>
<div class="pointer minute"></div>
<div class="pointer second"></div>
</div>
</div>
</body>
</html>效果见下方视频： [video width="2104" height="1334" mp4="https://cdn.orzzone.com/clock-running.mp4"][/video]