纯css打造普通时钟表

紫微前端

于 2022-12-08 16:16:25 发布

阅读量221

点赞数

分类专栏：原生javascript制作各种酷炫组件文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/128239072

版权

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍如何利用CSS3的动画和伪元素技巧，详细步骤解析如何构建一个实时更新的普通时钟，无需JavaScript介入，完全在前端实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
body { font-size:62.5%; margin:1em; background:#232425 }
ul { list-style:none; margin:0; padding:0 }
#watch { font-size:1em; position:relative }
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}
#watch .frame-face:before {
  content:'';
  width:29.4em;
  height:29.4em;
  border-radius:14.7em;
  position:absolute;
  top:.3em; lef

了解本专栏