css 动态显示刻度线
时间: 2023-08-28 21:21:12 浏览: 48
要实现CSS动态显示刻度线,可以使用以下代码片段作为参考:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.box {
width: 300px;
height: 300px;
margin: 200px auto;
border: 4px solid skyblue;
border-radius: 50%;
/* 边框阴影可以在浏览器阴影编辑器里面调 */
box-shadow: 0px 0px 16px 5px skyblue;
position: relative;
}
.line {
width: 0;
height: 100%;
border-left: 2px dashed white;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: lineAnimation 2s linear infinite;
animation-delay: 1s;
}
@keyframes lineAnimation {
0% {
height: 0;
}
100% {
height: 100%;
}
}
</style>
</head>
<body>
<div class="box">
<div class="line"></div>
</div>
</body>
</html>
```
这段代码中,我们使用了一个包含刻度线的容器`.box`。刻度线使用样式类`.line`定义,并设置了初始高度为0。通过`@keyframes`动画定义了刻度线从0到100%高度的变化效果,并通过`transform`将刻度线居中显示。最后,我们将刻度线添加到`.box`容器中。
希望这个例子能帮到你。如果有任何问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [html+css实现横向时间线](https://blog.csdn.net/mumu123abc/article/details/128312706)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [使用css制作动态时钟详细教程](https://blog.csdn.net/weixin_39411655/article/details/113795381)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]