掌握 CSS：重现掘金文章加载效果，渐变文字与动感十足的动画

2024-02-14 10:03:03

导言

在现代 web 开发中，为用户提供引人入胜且愉悦的体验至关重要。一个精心设计的加载效果可以极大地影响用户对应用程序或网站的第一印象，同时展示您的关注细节和美学品味。在本文中，我们将专注于重现掘金文章加载效果，该效果以其优雅的渐变文字和动感十足的动画而闻名。

构建基础结构

第一步是建立我们将应用效果的 HTML 和 CSS 基础结构。我们将创建一个简单的容器元素，它将容纳我们的渐变文本。

<div class="loading-container">
  <span class="loading-text">掘金</span>
</div>

.loading-container {
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-text {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
}

创建渐变效果

接下来，我们将利用 CSS 的 background-image 属性和 linear-gradient() 函数来创建渐变文本效果。

.loading-text {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00fffb, #00bfff, #0000ff, #8b00ff, #ff0000);
  animation: gradient 10s infinite alternate;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

添加动画

最后，我们将使用 CSS 动画来为渐变文本添加动感十足的动画。

.loading-text {
  animation: loading 3s infinite alternate;
}

@keyframes loading {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}