css动画小练习——时钟
2022-03-21 本文已影响0人
moutory
前言
本篇文章将使用css来做一个简单的时钟效果（由于没有使用js来做时间矫正，所以时钟虽然可以正常运行，但是具体的时间是不准确的）。
一、html部分
html部分的内容其实还是挺简单的，clock元素下有时针、分针、秒针三个子元素。且由于时针，分针，秒针三者运行时间不同，外观也不同，所以这三个元素之间为平级关系，并不会进行嵌套。
这里有个地方需要注意，这个练习的关键在于使用transfrom:rotateZ属性来控制元素的旋转，但是旋转是以元素的中心来进行的，所以我们可以有2种方案来解决这个问题。一种是每个指针内都放置一个背景颜色的div，从而隐藏指针运动的下半部分，第二种方案是每个指针外面都套一个父div，把旋转的效果交由父div来实现，这样指针就可以跟着父指针来实现旋转了。
<body>
<div class="container">
<div class="clock">
<div class="hour-warp">
<div class="hour"></div>
</div>
<div class="min-warp">
<div class="min"></div>
</div>
<div class="sec-warp">
<div class="sec"></div>
</div>
</div>
</div>
</body>
二、css部分
css部分基本除了动画部分之外，其他的基本就是让旋转的div放置在表盘的中心，以及多加了一个表盘的背景图片。
<style>
.container{
background-color: #fff;
width: 800px;
height: 800px;
padding-top: 100px;
}
.clock{
margin: 0 auto;
width: 400px;
height: 400px;
border: solid black 4px;
border-radius: 50%;
position: relative;
background-image: url(./image//bg.png);
background-size: cover;
}
.clock>div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.sec-warp{
height: 90%;
width: 90%;
animation: clock-move 60s steps(60) infinite;
}
.sec{
height: 50%;
width: 2px;
background-color: red;
margin: 0 auto;
}
.min-warp{
height: 80%;
width: 80%;
animation: clock-move 3600s linear infinite;
}
.min{
height: 50%;
width: 4px;
background-color: black;
margin: 0 auto;
}
.hour-warp{
height: 70%;
width: 70%;
animation: clock-move 43200s linear infinite;
}
.hour{
height: 50%;
width: 6px;
background-color: black;
margin: 0 auto;
}
@keyframes clock-move {
from{
transform: rotateZ(0);
}
to{
/* 1turn = 360deg */
transform: rotateZ(1turn);
}
}
</style>
三、效果图：
p4c9j-var6n.gif
