CSS会动的闹铃

紫微前端

于 2022-07-05 15:22:50 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

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

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

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

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何使用CSS创建一个动态变化的闹钟效果，详细讲解了CSS在前端设计中的应用，通过实例展示了如何结合HTML和JavaScript实现时间的实时更新和动画效果。

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

<div class="shake"></div>

.shake {
  width: 100px;
  aspect-ratio: 1;
  color: #ce0800;
  border: 14px solid;
  border-radius: 50%;
  position: relative;
  background: 
    radial-gradient(circle 6px, #000 90%,#0000),
    linear-gradient(180deg,#000 50%,#0000 0) center/5px 70%,
    linear-gradient(90deg ,#000 50%,#0000 0) center/50% 5px;
  background-repeat: no-repeat;
  animation: shake 1s infinite;
}
.shake:before, 
.shake:after {
  content: "";
  position: absolute;
  border-radius: 40px 40px 0 0;
  inset: -40px calc(50% - 20px);
  transform: rotate(40deg

了解本专栏