如何用css实现下图效果?

图片描述

不知道用什么方法可以实现。
之前用svg做出来了一个,但是闪光点不好实现。
进度条是渐变的。

阅读 695
评论
    1 个回答

    弄完整比较麻烦...不过那个闪光点我弄过,不知道能不能满足你的要求

    CSS

    .box {
          position: relative;
          margin: 100px;
        }
    
        .shadow {
          /* background: rgba(255, 0, 0, 0); */
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -5px;
          margin-top: -5px;
          background: #f00;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          opacity: 1;
          box-shadow: 0 0 5px #f00;
          transform: scale(2, 2);
          animation: light 1s;
          animation-iteration-count: infinite;
          animation-direction: normal;
          /* 
          这个属性检索或设置对象动画在循环中是否反向运动
          animation-direction: reverse;
          animation-direction: normal;
          animation-direction: alternate;
          animation-direction: alternate-reverse; */
        }
        
        .dot {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -5px;
          margin-top: -5px;
          background: #f00;
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
    
        @keyframes light {
          0% {
            transform: scale(1, 1);
          }
          50% {
            transform: scale(3, 3);
            opacity: 0;
          }
          100% {
            transform: scale(1, 1);
            opacity: 0;
          }
        }

    html

    <div class="box">
        <div class="shadow"></div>
        <div class="dot"></div>
    </div>
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章