效果展示

文字雨特效1.png

CSS 知识点

• 简易实现云朵技巧
• text-shadow 属性的灵活运用
• filter 属性实现元素自动变色

实现页面布局

<div class="container">
  <div class="cloud">
    <h2>Data Clouds Rain</h2>
  </div>
</div>

实现云朵

实现云朵我们可以伪元素和box-shadow属性实现。

/* 实现云朵下文字部分 */
.container .cloud h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #000;
  font-size: 2em;
  z-index: 100;
  font-weight: 400;
  padding: 0 10px;
  border-radius: 10px;
  text-transform: uppercase;
  background: var(--clr);
}
/* 实现云朵底部 */
.container .cloud h2::before {
  content: "";
  display: block;
  position: absolute;
  top: -115px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 100px;
  border-radius: 200px;
  background: var(--clr);
}
/* 实现云朵头部 */
.container .cloud h2::after {
  /* 实现云朵头部小圆 */
  content: "";
  position: absolute;
  top: -150px;
  left: 25px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--clr);
  /* 使用阴影完成云朵头部大圆 */
  box-shadow: 120px -30px 0 40px var(--clr);
}

通过上述代码实现后，可以看到如下的效果：

文字雨特效2.png

实现云朵自动颜色变化

元素自动变化颜色可以使用animation与filter属性的 hue-rotate 值来进行实现。

.container {
  position: relative;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: animateColor 5s linear infinite;
}

@keyframes animateColor {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

使用 JavaScript 实现定时生成文字雨

function randomText() {
  const text = "abcdefghjklmnopqrstuvwsyz1234567890~!@#$%^&*()_+";
  letters = text[Math.floor(Math.random() * text.length)];
  return letters;
}

function rain() {
  let cloud = document.querySelector(".cloud");
  let e = document.createElement("div");

  e.classList.add("drop");
  cloud.appendChild(e);

  let left = Math.floor(Math.random() * 300);
  let size = Math.random() * 1.5;
  let duration = Math.random() * 1;

  e.innerText = randomText();
  e.style.left = left + "px";
  e.style.fontSize = 0.5 + size + "em";
  e.style.animationDirection = 1 + duration + "s";

  // 回收落到地面后的文字，以免元素过多页面长生卡顿
  setTimeout(() => {
    cloud.removeChild(e);
  }, 2000);
}

setInterval(() => {
  rain();
}, 20);

编写文字雨相应样式及动画

.container .cloud .drop {
  position: absolute;
  top: 60px;
  height: 20px;
  line-height: 20px;
  color: var(--clr);
  transform-origin: bottom;
  animation: textAnimation 2s linear infinite;
}

@keyframes textAnimation {
  0% {
    transform: translateY(0) scaleY(0);
    transform-origin: top;
  }
  10% {
    transform: translateY(0) scaleY(0.25);
    transform-origin: top;
  }
  20% {
    transform: translateY(0) scaleY(1);
  }
  70% {
    transform: translateY(300px) scale(1);
    transform-origin: bottom;
  }
  80% {
    transform: translateY(300px) scale(1);
    transform-origin: bottom;
  }
  100% {
    transform: translateY(300px) scale(0);
    transform-origin: bottom;
    text-shadow: -180px 0 0 var(--clr), 180px 0 0 var(--clr);
  }
}

完整代码下载

完整代码下载