css图片时钟 |css文字下线条伸缩效果

.clock {
width: 200px;
height: 200px;
background-image: url(clock.png);
background-size: cover;
position: relative;
}
.hour-hand {
width: 6px;
height: 60px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
}
.minute-hand {
width: 4px;
height: 80px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
}
.second-hand {
width: 2px;
height: 100px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
transform-origin: bottom center;
animation: spin 60s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

这是一个使用CSS创建的图片时钟。通过使用background-image将图片作为时钟的背景，用绝对定位的指针来表示小时、分钟和秒钟。

首先，大家创建一个类叫做.clock，它定义了时钟的宽度、高度和背景图像，它还用position:relative来确定绝对定位的子元素。

接下来就是重头戏了——时钟的指针。大家用类.hour-hand、.minute-hand和.second-hand来表示它们。每个指针都有一个width、height、background-color和position:absolute属性，用来确定指针的大小、颜色和位置。请注意，它们的初始位置是在时钟的中心，因此大家使用translate(-50 %，-100 %)将它们移到中心。

但是，大家还需要将指针从它们的末端旋转。这是由transform-origin和transform属性实现的。transform-origin用来确定指针的旋转点，transform用来执行旋转动画。因为小时和分钟不需要动画，所以它们只需要第一个属性，而秒钟需要旋转动画，因此大家使用了animation属性。

最后，大家定义了@keyframes spin，它定义了指针旋转的动画。在这个例子中，大家使用了线性动画，并将指针旋转360度，使它们绕着钟表面转动。

这就是CSS图片时钟的全部内容。查看在线演示，点击这里。