忙指标CSS

Question

我正在为我的窗口小部件创建忙碌指示器

我需要帮助以使圈子也闪闪发光

链接到代码：

`https://jsfiddle.net/rhdew1pc/109/`

任何帮助将不胜感激

Answer 1

由于您是CSS动画的粉丝（像我一样），因此我强烈建议您检查一下您可以使用这些工具在一秒钟内轻松生成的各种动画：

http://animista.net/

http://www.theappguruz.com/tag-tools/web/CSSAnimations/

http://angrytools.com/css/animation/

我个人会这样做：

.pulsate-bck{-webkit-animation:pulsate-bck .5s ease-in-out infinite both;animation:pulsate-bck .5s ease-in-out infinite both}

@-webkit-keyframes pulsate-bck{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulsate-bck{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.9);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}

@-webkit-keyframes placeHolderShimmer {
    0% {
      background-position: -468px 0
    }
    100% {
      background-position: 468px 0
    }
  }
  @-webkit-keyframes prideShimmer {
    from {
      background-position: top left
    }
    to {
      background-position: top right
    }
  } 

.animated-background {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeHolderShimmer;
    -webkit-animation-timing-function: linear;
    background: #fff;
    background-image: linear-gradient(to right, #d8d8d8 0%, #fff 20%, #d8d8d8 40%, #fff 100%);
    background-repeat: no-repeat;
    background-size: 9OOpx 1O4px;
    height: 275px;
    position: relative;
  }

.dot {
    border-radius: 100%;
    box-shadow: 0px 0px 0px 5px #fff;
    content: '';
    height: 180px;
    left: 105px;
    position: absolute;
    top: 15px;
    width: 179.80px;
    background: radial-gradient(ellipse at center center, #D8D8D8 24%, #D8D8D8 31%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
  } 

.white1{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 20px;
    left: 0; right: 0;
    position: absolute;
    top: 200px;
    /* width: 305px; */
    background: radial-gradient(#fff, #fff);
}
.white2{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 6px;
    left: 410px; right: 0;
    position: absolute;
    top: 220px;
    /* width: 305px; */
    background: radial-gradient(#fff, #fff);
}
.white3{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 13px;
    left: 0; right: 0;
    position: absolute;
    top: 226px;
    /* width: 200px; */
    background: radial-gradient(#fff, #fff);
}
.white4{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 6px;
    left: 440px; right: 0;
    position: absolute;
    top: 239px;
    /* width: 200px; */
    background: radial-gradient(#fff, #fff);
}
.white5{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 13px;
    left: 0; right: 0;
    position: absolute;
    top: 245px;
    /* width: 200px; */
    background: radial-gradient(#fff, #fff);
}
.white6{
    border-radius: 0%;
    box-shadow: 0px 0px 0px 2px #fff;
    content: '';
    height: 6px;
    left: 178px; right: 0;
    position: absolute;
    top: 258px;
    /* width: 200px; */
    background: radial-gradient(#fff, #fff); 
}
.white7{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 13px;
    left: 0; right: 0;
    position: absolute;
    top: 264px;
    /*width: 200px; */
    background: radial-gradient(#fff, #fff);
}
.c1{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 200px;
    left: 0x; right: 200
    position: absolute;
    top: 1px;
    /*dth: 200px; */
    background: radial-gradient(#fff, #fff);
}
.c2{
    border-radius: 0%;
    /* box-shadow: 0px 0px 0px 2px #fff; */
    content: '';
    height: 200px;
    left: 0; right: 40px;
    position: absolute;
    top: 1px;
    width: 100px;
    background: radial-gradient(#fff, #fff);
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

<div class="animated-background">
<div class="dot pulsate-bck"></div> 
<div class="white1"></div>
<div class="white2"></div>
<div class="white3"></div>
<div class="white4"></div>
<div class="white5"></div>
<div class="white6"></div>
<div class="white7"></div>
<div class="c1"></div>
<div class="c2"></div>
</div>

</body>
</html>