CSS时钟案例

news/2024/4/27 18:28:18/文章来源:https://blog.csdn.net/dongxiaod1/article/details/136979903

文章目录

1. 演示效果
2. 分析思路
3. 代码实现

1. 演示效果

QQ录屏20240318115401 -original-original

2. 分析思路

背景是表盘，不用自己制作
然后用CSS的定位做时针，分针和秒针
黑点用伪元素::after生成
转动用animation实现

3. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>02-时钟效果</title><style>.box {display: flex;justify-content: center;align-items: center;width: 350px;height: 380px;background: rgb(205, 205, 205);margin: 0 auto;border-radius: 10px;}.clock {position: relative;width: 300px;height: 300px;background: #fff url("./img/ios_clock.svg") no-repeat center;background-size: 88%;border-radius: 50%;}/* 中间黑点 */.clock::after {position: absolute;top: 50%;left: 50%;content: "";width: 15px;height: 15px;background: #000;border-radius: 50%;/* 向左上移动自身的50% */transform: translate(-50%, -50%);z-index: 10;}/* 时针 */.hours {position: absolute;top: 30%;left: 48.5%;width: 3%;height: 20%;background: #000;/* 沿底部旋转 */transform-origin: 50% 100%;animation: myRotate 43200s infinite steps(60);}/* 分针 */.minutes {position: absolute;top: 13%;left: 49%;width: 2%;height: 37%;background: #000;/* 沿底部旋转 */transform-origin: 50% 100%;animation: myRotate 3600s infinite steps(60);}/* 秒针 */.seconds {position: absolute;top: 16.5%;left: 49.5%;width: 1%;height: 40%;background: #f00;/* 沿底部旋转 */transform-origin: 50% 84%;/* 添加动画 *//* animation: myRotate 60s infinite linear; */animation: myRotate 60s infinite steps(60);}/* 定义动画 */@keyframes myRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style></head><body><div class="box"><div class="clock"><div class="hours"></div><div class="minutes"></div><div class="seconds"></div></div></div></body>
</html>