svg加载动画

下载代码

html

css

分享到微信朋友圈

html

<div>

<h1>PLASMA</h1>

<svg width="0" height="0">
 <filter id="gooey-plasma">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur"/>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -16" result="goo" />
  </filter>
</svg>
<div class="plasma">
  <div class="gooey-container">
    <span class="bubble"></span>
    <span class="bubble"></span>
    <span class="bubble"></span>
    <span class="bubble"></span>
    <span class="bubble"></span>
    <span class="bubble"></span>
  </div>
</div>

</div>
<div>
  
  
<h1>PLASMA-2</h1>

<svg width="0" height="0">
 <filter id="gooey-plasma-2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur"/>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -16" result="goo" />
  </filter>
</svg>
<div class="plasma-2">
  <ul class="gooey-container">
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
  </ul>
</div>

</div>
<div>
  
  
<h1>FILL</h1>

<svg width="0" height="0">
 <filter id="gooey-fill">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur"/>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -16" result="goo" />
  </filter>
</svg>
<div class="fill">
  <div class="gooey-container">
    <span class="level">
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
    </span>
  </div>
</div>

</div>
<div>
  
  
<h1>BLACK-HOLE</h1>

<svg width="0" height="0">
 <filter id="gooey-black-hole">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur"/>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -16" result="goo" />
  </filter>
</svg>
<div class="black-hole">
  <ul class="gooey-container">
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
    <li class="bubble"></li>
  </ul>
</div>

</div>

css

body {
  margin: 50px 0;
  padding: 0;
  font-size: 0;
  font-family: 'Nova Flat';
  background: #190a25;
  color: white;
  text-align: center;
}
body h1 {
  display: block;
  height: 25px;
  font-size: 12px;
}
body > div {
  display: inline-block;
  width: 25%;
  min-width: 500px;
  margin-bottom: 50px;
}
body > div > div {
  margin: 0 auto;
}

@keyframes plasma {
  0% {
    transform: scale(6) translate3d(20px, 0, 0);
  }
  50% {
    transform: scale(1) translate3d(-60px, 0, 0);
  }
  100% {
    transform: scale(6) translate3d(20px, 0, 0);
  }
}
.plasma {
  backface-visibility: hidden;
  z-index: 20;
  position: relative;
  width: 250px;
  height: 250px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}
.plasma .gooey-container {
  filter: url(#gooey-plasma);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 20px #ff4081 inset;
  border-radius: 50%;
  overflow: hidden;
}
.plasma .gooey-container .bubble {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: right;
}
.plasma .gooey-container .bubble:before {
  content: "";
  display: inline-block;
  background: #ff4081;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: scale(6) translate3d(20px, 0, 0);
  box-shadow: 0 0 15px 0 #0000ff inset, 0 0 10px 0 #0000ff inset;
}
.plasma .gooey-container .bubble:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.plasma .gooey-container .bubble:nth-child(1):before {
  animation: plasma 3.5s linear 0.25s infinite;
}
.plasma .gooey-container .bubble:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.plasma .gooey-container .bubble:nth-child(2):before {
  animation: plasma 4s linear 0.5s infinite;
}
.plasma .gooey-container .bubble:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.plasma .gooey-container .bubble:nth-child(3):before {
  animation: plasma 4.5s linear 0.75s infinite;
}
.plasma .gooey-container .bubble:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.plasma .gooey-container .bubble:nth-child(4):before {
  animation: plasma 5s linear 1s infinite;
}
.plasma .gooey-container .bubble:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.plasma .gooey-container .bubble:nth-child(5):before {
  animation: plasma 5.5s linear 1.25s infinite;
}
.plasma .gooey-container .bubble:nth-child(6) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.plasma .gooey-container .bubble:nth-child(6):before {
  animation: plasma 6s linear 1.5s infinite;
}

@keyframes plasma-2 {
  0% {
    transform: scale(1) translate3d(60px, 0, 0);
  }
  50% {
    transform: scale(2) translate3d(-60px, 0, 0);
  }
  100% {
    transform: scale(1) translate3d(60px, 0, 0);
  }
}
@keyframes plasma-2-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.plasma-2 {
  backface-visibility: hidden;
  z-index: 20;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  padding: 0;
}
.plasma-2 .gooey-container {
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url(#gooey-plasma-2);
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 20px #9900ff inset;
  animation: plasma-2-rotate 5s linear infinite;
}
.plasma-2 .gooey-container .bubble {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: right;
}
.plasma-2 .gooey-container .bubble:before {
  content: "";
  display: inline-block;
  background: #ff4081;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: scale(1) translate3d(75px, 0, 0);
  box-shadow: 0 0 10px 5px #0000ff inset, 0 0 10px 0 #0000ff inset;
}
.plasma-2 .gooey-container .bubble:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.plasma-2 .gooey-container .bubble:nth-child(1):before {
  animation: plasma-2 2.5s ease 0.5s infinite;
}
.plasma-2 .gooey-container .bubble:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.plasma-2 .gooey-container .bubble:nth-child(2):before {
  animation: plasma-2 5s ease 0.25s infinite;
}
.plasma-2 .gooey-container .bubble:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.plasma-2 .gooey-container .bubble:nth-child(3):before {
  animation: plasma-2 7.5s ease 0.1666666667s infinite;
}
.plasma-2 .gooey-container .bubble:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.plasma-2 .gooey-container .bubble:nth-child(4):before {
  animation: plasma-2 10s ease 0.125s infinite;
}
.plasma-2 .gooey-container .bubble:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.plasma-2 .gooey-container .bubble:nth-child(5):before {
  animation: plasma-2 12.5s ease 0.1s infinite;
}
.plasma-2 .gooey-container .bubble:nth-child(6) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.plasma-2 .gooey-container .bubble:nth-child(6):before {
  animation: plasma-2 15s ease 0.0833333333s infinite;
}

@keyframes fill-level {
  0% {
    transform: translate3d(-413px, -53px, 0) rotate(45deg);
  }
  15% {
    transform: translate3d(-393px, -73px, 0) rotate(25deg);
  }
  30% {
    transform: translate3d(-343px, -123px, 0) rotate(45deg);
  }
  45% {
    transform: translate3d(-283px, -183px, 0) rotate(55deg);
  }
  60% {
    transform: translate3d(-263px, -203px, 0) rotate(45deg);
  }
  75% {
    transform: translate3d(-243px, -223px, 0) rotate(35deg);
  }
  90% {
    transform: translate3d(-223px, -243px, 0) rotate(45deg);
  }
  100% {
    transform: translate3d(-203px, -263px, 0) rotate(55deg);
  }
}
.fill {
  backface-visibility: hidden;
  z-index: 20;
  position: relative;
  width: 250px;
  height: 250px;
  padding: 0;
  border-radius: 50% 50% 50% 50%;
  overflow: hidden;
  transform: rotate(-45deg);
}
.fill .gooey-container {
  filter: url(#gooey-fill);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 18px #0000ff inset;
  border-radius: 50% 0 50% 50%;
  overflow: hidden;
}
.fill .gooey-container .level, .fill .gooey-container .bubble {
  background: #ff4081;
}
.fill .gooey-container .level {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 300px;
  left: 50%;
  width: 500px;
  height: 350px;
  text-align: center;
  transform-origin: 50% 0;
  transform: translate3d(-413px, -53px, 0) rotate(45deg);
  animation: fill-level 5s linear infinite;
  box-shadow: 0 0 100px 0 #0000ff inset,  0 0 200px 0 #0000ff inset;
}
@keyframes fill-bubbles {
  0% {
    transform: translate3d(-100px, -20px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(100px, -40px, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(-100px, -20px, 0) rotate(360deg);
  }
}
.fill .gooey-container .bubble {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: rotate(0deg) translate3d(0, 0, 0);
  box-shadow: 0 0 30px 20px #0000ff inset;
}
.fill .gooey-container .bubble:nth-child(1) {
  animation: fill-bubbles 1.5s ease 0.5s infinite;
}
.fill .gooey-container .bubble:nth-child(2) {
  animation: fill-bubbles 3s ease 0.25s infinite;
}
.fill .gooey-container .bubble:nth-child(3) {
  animation: fill-bubbles 4.5s ease 0.1666666667s infinite;
}
.fill .gooey-container .bubble:nth-child(4) {
  animation: fill-bubbles 6s ease 0.125s infinite;
}
.fill .gooey-container .bubble:nth-child(5) {
  animation: fill-bubbles 7.5s ease 0.1s infinite;
}
.fill .gooey-container .bubble:nth-child(6) {
  animation: fill-bubbles 9s ease 0.0833333333s infinite;
}
.fill .gooey-container .bubble:nth-child(7) {
  animation: fill-bubbles 10.5s ease 0.0714285714s infinite;
}
.fill .gooey-container .bubble:nth-child(8) {
  animation: fill-bubbles 12s ease 0.0625s infinite;
}

@keyframes black-hole {
  0% {
    transform: scale(1) translate3d(75px, 0, 0);
  }
  50% {
    transform: scale(4) translate3d(55px, 0, 0);
  }
  100% {
    transform: scale(1) translate3d(75px, 0, 0);
  }
}
@keyframes black-hole-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) skew(3deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) skew(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) skew(3deg);
  }
}
.black-hole {
  backface-visibility: hidden;
  z-index: 20;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  padding: 0;
  box-shadow: 0 0 30px 0 #0000ff inset;
}
.black-hole .gooey-container {
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) skew(5deg);
  filter: url(#gooey-plasma-2);
  width: 300px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 22px #9900ff inset;
  animation: black-hole-rotate 5s ease infinite;
}
.black-hole .gooey-container .bubble {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: right;
}
.black-hole .gooey-container .bubble:before {
  content: "";
  display: inline-block;
  background: #ff4081;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(1) translate3d(75px, 0, 0);
  box-shadow: 0 0 10px 0 #0000ff inset, 0 0 10px 0 #0000ff inset;
}
.black-hole .gooey-container .bubble:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.black-hole .gooey-container .bubble:nth-child(1):before {
  animation: black-hole 1s ease 0.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.black-hole .gooey-container .bubble:nth-child(2):before {
  animation: black-hole 2s ease 1s infinite;
}
.black-hole .gooey-container .bubble:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.black-hole .gooey-container .bubble:nth-child(3):before {
  animation: black-hole 3s ease 1.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.black-hole .gooey-container .bubble:nth-child(4):before {
  animation: black-hole 4s ease 2s infinite;
}
.black-hole .gooey-container .bubble:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.black-hole .gooey-container .bubble:nth-child(5):before {
  animation: black-hole 5s ease 2.5s infinite;
}
.black-hole .gooey-container .bubble:nth-child(6) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.black-hole .gooey-container .bubble:nth-child(6):before {
  animation: black-hole 6s ease 3s infinite;
}

JavaScript

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