css实现呼吸灯样式

最新推荐文章于 2024-07-30 08:09:49 发布

短暂又灿烂的

最新推荐文章于 2024-07-30 08:09:49 发布

阅读量1.6k

点赞数 3

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_42232156/article/details/126280157

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<style>
  .styles_pulse__9HoxO {
    display: inline-block;
    -webkit-animation: styles_pulse-loader__5535u 1.5s ease-out infinite;
    animation: styles_pulse-loader__5535u 1.5s ease-out infinite;
    border-radius: 50%;
    overflow: hidden;
    text-indent: 50px;
    background-color: #e1aa4c;
    width: 8px;
    height: 8px;
}

@keyframes styles_pulse-loader__5535u {
  0% {
    background-color: #e1aa4c;
    box-shadow: 0 0 0 0 rgb(225 170 76 / 0%);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  20% {
      background-color: #fbb337;
      box-shadow: 0 0 0 4px rgb(225 170 76 / 60%);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
  }
  80% {
      background-color: #e1aa4c;
      box-shadow: 0 0 0 8px rgb(225 170 76 / 0%);
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

</style>