HTML+CSS3 实现时钟效果（秒针抖动）
程序员文章站
2022-05-08 16:50:07
...
效果如下
思路写在注释里面啦
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟</title>
<style>
.box {
margin: 100px auto;
width: 300px;
height: 300px;
border: 10px solid #cccccc;
position: relative;
}
.box .cir {
width: 15px;
height: 15px;
background-color: #ccc;
}
.box>.line {
height: 300px;
width: 10px;
position: absolute;
background-color: #cccccc;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 指定刻度线的位置 */
.box>.line2 {
width: 7px;
transform: translate(-50%, -50%) rotateZ(30deg);
}
.box>.line3 {
width: 7px;
transform: translate(-50%, -50%) rotateZ(60deg);
}
.box>.line4 {
transform: translate(-50%, -50%) rotateZ(90deg);
}
.box>.line5 {
width: 7px;
transform: translate(-50%, -50%) rotateZ(120deg);
}
.box>.line6 {
width: 7px;
transform: translate(-50%, -50%) rotateZ(150deg);
}
/* 形成一个空白圆盖住line 形成刻度线*/
.circle {
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 270px;
height: 270px;
background-color: #fff;
}
.needle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hour {
width: 10px;
height: 90px;
background-color: limegreen;
border-radius: 5px 5px;
/*设置旋转轴心*/
transform-origin: bottom;
animation: clockanimation 43200s linear infinite;
}
.minute {
width: 7px;
height: 100px;
background-color: rgba(77, 14, 238, 0.741);
border-radius: 3.5px 3.5px;
/*设置旋转轴心*/
transform-origin: bottom;
animation: clockanimation 3600s linear infinite;
}
.second {
width: 4px;
height: 120px;
/*设置旋转轴心*/
transform-origin: 50% 90%;
top: 162px;
animation: clockanimation 60s steps(60) infinite;
}
/* 秒针抖动效果 */
.second::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 2px 2px;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rosybrown;
transform-origin: bottom;
/* 通过贝塞尔曲线实现抖动 */
animation: inner 1s cubic-bezier(0.4, 2.08, 0.55, 0.44) infinite;
}
/* 在秒针总共1s的关键帧过程中前0.2s产生5deg的抖动 再继续clockanimation的关键帧 实现秒针的抖动效果*/
@keyframes inner {
0% {
transform: translate(-50%, -100%);
}
20%,
to {
transform: translate(-50%, -100%) rotate(5deg);
}
}
@keyframes clockanimation {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, -100%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="circle"></div>
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="circle cir"></div>
</div>
</body>
</html>
上一篇： js—深入原型之三继承
下一篇： 原生JS+css3实现时钟效果，源码奉上