通过 CSS3 实现特殊效果

文字渐变效果

.shade {
    background: linear-gradient(to right, #c23616, #192a56, #00d2d3, yellow, #6d214f, #4cd137, #e84118);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
}

<h1 class="shade">文字变成渐变色</h1>

图形交融效果

body {
  background: #000;
}
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 50%;
  /* 调整对比度 */
  filter: contrast(5);
}
.black-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #000;
  border-radius: 50%;
  filter: blur(3px);
}
.red-ball {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  background: red;
  border-radius: 50%;
  /* 模糊效果 */
  filter: blur(3px);
}

<div class="container">
  <div class="black-ball"></div>
  <div class="red-ball"></div>
</div>