闪电加载动画

下载代码

html

css

分享到微信朋友圈

html

<small>Optimized for<br>Google Chrome Desktop</small>

css

.bolt {
  --bolt: rgb(242, 222, 16);
  width: 126px;
  height: 186px;
  position: relative;
}
.bolt svg {
  position: absolute;
  display: block;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke: var(--bolt);
}
.bolt svg.circle {
  left: 7px;
  top: 100%;
  width: 112px;
  height: 44px;
  stroke-dashoffset: 179px;
  stroke-dasharray: 0px 178px;
}
.bolt svg.line {
  --r: 0deg;
  top: 95%;
  width: 70px;
  height: 3px;
  stroke-dashoffset: 71px;
  stroke-dasharray: 0px 70px;
  -webkit-transform: rotate(var(--r));
          transform: rotate(var(--r));
}
.bolt svg.line.left {
  --r: 130deg;
  left: -24px;
}
.bolt svg.line.right {
  --r: 40deg;
  right: -24px;
}
.bolt svg.white {
  --r: 0deg;
  --s: 1;
  top: 30%;
  z-index: 1;
  stroke: #fff;
  stroke-dashoffset: 241px;
  stroke-dasharray: 0px 240px;
  -webkit-transform: rotate(var(--r)) scaleX(var(--s));
          transform: rotate(var(--r)) scaleX(var(--s));
}
.bolt svg.white.left {
  --r: -20deg;
  left: 0;
}
.bolt svg.white.right {
  --r: 20deg;
  --s: -1;
  right: 0;
}
.bolt div {
  display: block;
  position: relative;
}
.bolt div:before, .bolt div:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
}
.bolt div:before {
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  background: #CDD9ED;
  -webkit-filter: blur(124px);
          filter: blur(124px);
}
.bolt div:after {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: #FFF9BC;
  z-index: 1;
  -webkit-filter: blur(60px);
          filter: blur(60px);
}
.bolt div span {
  display: block;
  width: 126px;
  height: 186px;
  background: var(--bolt);
  -webkit-clip-path: polygon(40% 0%, 100% 0, 65% 40%, 88% 40%, 8% 100%, 36% 50%, 0 50%);
          clip-path: polygon(40% 0%, 100% 0, 65% 40%, 88% 40%, 8% 100%, 36% 50%, 0 50%);
}
.bolt.animate div:before, .bolt.animate div:after {
  -webkit-animation: shine 2s ease;
          animation: shine 2s ease;
}
.bolt.animate div span {
  -webkit-animation: morph 2s ease;
          animation: morph 2s ease;
}
.bolt.animate svg.circle {
  -webkit-animation: circle 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
          animation: circle 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}
.bolt.animate svg.line {
  -webkit-animation: line 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
          animation: line 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}
.bolt.animate svg.white {
  -webkit-animation: white 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
          animation: white 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
}
.bolt.animate svg.white.right {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

@-webkit-keyframes circle {
  100% {
    stroke-dasharray: 178px 178px;
  }
}

@keyframes circle {
  100% {
    stroke-dasharray: 178px 178px;
  }
}
@-webkit-keyframes white {
  100% {
    stroke-dasharray: 240px 240px;
  }
}
@keyframes white {
  100% {
    stroke-dasharray: 240px 240px;
  }
}
@-webkit-keyframes line {
  100% {
    stroke-dasharray: 70px 70px;
  }
}
@keyframes line {
  100% {
    stroke-dasharray: 70px 70px;
  }
}
@-webkit-keyframes shine {
  30%,
    70% {
    opacity: 0;
  }
}
@keyframes shine {
  30%,
    70% {
    opacity: 0;
  }
}
@-webkit-keyframes morph {
  12% {
    -webkit-clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
            clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
  24%,
    72% {
    -webkit-clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
            clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
  }
  84% {
    -webkit-clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
            clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
}
@keyframes morph {
  12% {
    -webkit-clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
            clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
  24%,
    72% {
    -webkit-clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
            clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
  }
  84% {
    -webkit-clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
            clip-path: polygon(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

small {
  position: absolute;
  bottom: 32px;
  font-size: 14px;
  font-family: Arial;
  text-align: center;
  line-height: 19px;
  color: #6C7486;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0C0F17;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
body .dribbble img {
  display: block;
  width: 76px;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg