今天在网上跟着做了一个纯CSS写的小圆表
其难度在于 不是给针转 如果是给针转了那么z轴就会沿着针的z轴中心点转了那就错了 记住是给针外面那个圆的中心点z轴转 圆的中心点z轴转动带动针转就可以了 所以要在针得外面套圆
代码如下:
<style>
* {
padding: 0px;
margin: 0px;
}
/* 表的容器样式 */
.bell-container {
position: relative;
width: 450px;
height: 450px;
margin: 100px auto;
border: 10px solid blue;
border-radius: 50%;
background: url(img/bg.jpg) no-repeat center/100%;
}
.bell-container>div {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
position: absolute;
}
/* 秒针容器样式 */
.second {
width: 90%;
height: 90%;
border-radius: 50%;
/* background-color: red; */
z-index: 3;
animation: zhuan 10s linear infinite;
}
/* 秒针样式 */
.second-wrapper {
margin: auto;
width: 4px;
height: 50%;
background-color: #000;
}
/* 分针容器样式 */
.divide {
width: 80%;
height: 80%;
border-radius: 50%;
/* background-color: pink; */
z-index: 2;
animation: zhuan 600s linear infinite;
}
/* 分针样式 */
.divide-wrapper {
width: 6px;
height: 50%;
background-color: blue;
margin: auto;
}
/* 时针容器样式 */
.season {
width: 70%;
height: 70%;
border-radius: 50%;
/* background-color: yellow; */
z-index: 1;
animation: zhuan 7200s linear infinite;
}
/* 时针样式*/
.season-wrapper {
width: 8px;
height: 50%;
background-color: brown;
margin: auto;
}
/* 设置动画效果 */
@keyframes zhuan {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<!-- 表的容器 -->
<div class="bell-container">
<!-- 创建一个秒针的容器 -->
<div class="second">
<!-- 秒针 -->
<div class="second-wrapper"></div>
</div>
<!-- 创建一个分针的容器 -->
<div class="divide">
<!-- 分针 -->
<div class="divide-wrapper"></div>
</div>
<!-- 创建一个时针的容器 -->
<div class="season">
<!-- 时针 -->
<div class="season-wrapper"></div>
</div>
</div>
</body>
</html>