自定义CSS加载动画颜色：以lds-ripple为例-html教程-PHP中文网

自定义CSS加载动画颜色：以lds-ripple为例

碧海醫心

发布： 2025-10-08 11:19:40

原创

781人浏览过

自定义CSS加载动画颜色：以lds-ripple为例

本文详细介绍了如何自定义CSS加载动画（如lds-ripple）的颜色。核心在于理解动画的视觉呈现机制，并针对性地修改.lds-ripple div样式规则中的border属性值，而非误用color属性，从而轻松实现加载器环形效果的颜色定制。

理解CSS加载动画的构成与颜色机制

在网页开发中，css加载动画（preloader）常用于提升用户体验，告知用户内容正在加载。许多此类动画，特别是那些由圆形或线条组成的动画，其视觉效果并非通过color属性来控制，而是巧妙地利用了元素的border（边框）或background（背景）属性。

以常见的lds-ripple加载动画为例，它通过两个不断扩大并淡出的圆形边框来模拟波纹效果。当尝试改变其颜色时，直观上可能会尝试修改color属性，但由于lds-ripple的动画环形是由div元素的border属性渲染的，color属性（主要影响文本颜色）将不起作用。因此，要改变这些环形的颜色，需要精确地修改生成这些环形的border属性。

核心修改：定位并调整 border 属性

要为lds-ripple加载动画设置颜色，关键在于找到定义其环形边框的CSS规则，并修改其中的border-color值。

在lds-ripple的CSS定义中，.lds-ripple div选择器负责定义每个动画环形的基本样式，包括其边框。原始代码通常会设置一个默认的边框颜色，例如border: 4px solid #fff;。这里的#fff（白色）就是环形的颜色来源。

修改步骤：

立即学习“前端免费学习笔记（深入）”；

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

找到您的CSS样式表中定义.lds-ripple div的规则。
将该规则中的border属性值修改为您期望的颜色。例如，如果您希望加载器显示为红色，可以将#fff替换为red、#FF0000或rgb(255, 0, 0)。

示例代码

以下是包含颜色修改的完整HTML、CSS和JavaScript示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义CSS加载动画颜色</title>
<style>
/* 整个加载器容器的样式 */
#loader {
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  border:green solid 1px; /* 示例边框，与加载器颜色无关 */
  opacity:0.9;
  background-color:whitesmoke;
  position:absolute;
  left:0;
  top:0;
  z-index: 9999; /* 确保加载器在最上层 */
 }

/* lds-ripple 动画容器的样式 */
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

/* 构成动画的每个 div 元素的样式 */
.lds-ripple div {
  position: absolute;
  /* 关键修改：将边框颜色从 #fff 改为 desired_color */
  border: 4px solid red; /* 这里将加载器颜色设置为红色 */
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }

/* 第二个动画 div 的延迟，用于创建交错效果 */
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

/* 动画关键帧定义 */
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
</style>
</head>
<body>

<button id="btnShow" onclick="showLoader()">显示加载器</button>

<div id="loader">
  <div class="lds-ripple">
    <div></div>
    <div></div>
  </div>
</div>

<script>
function showLoader() {
  document.getElementById("loader").style.display = "flex";
  // 模拟加载结束后隐藏加载器
  setTimeout(() => {
    // document.getElementById("loader").style.display = "none";
  }, 3000);
}
</script>

</body>
</html>

登录后复制

在上述代码中，您只需将.lds-ripple div规则中的border: 4px solid red;中的red替换为您想要的任何CSS颜色值即可。

注意事项

理解CSS属性作用： 在自定义任何CSS组件时，首先要理解其视觉效果是由哪些CSS属性控制的。color属性通常影响文本或前景颜色，而边框、背景、阴影等有各自独立的颜色属性。
颜色格式选择： 您可以使用多种CSS颜色格式来定义颜色，包括：
- 命名颜色： red, blue, green等。
- 十六进制颜色： #FF0000 (红色), #00FF00 (绿色), #336699等。
- RGB颜色： rgb(255, 0, 0) (红色), rgb(51, 102, 153)等。
- RGBA颜色： rgba(255, 0, 0, 0.8) (80%透明度的红色)，适用于需要透明度的场景。
优先级问题： 如果您的样式没有生效，请检查是否存在其他CSS规则覆盖了.lds-ripple div的border属性。可以使用浏览器开发者工具检查元素的计算样式，找出是哪个规则最终生效。
动态颜色调整： 如果需要根据应用主题、用户偏好或特定状态动态改变加载器颜色，可以通过JavaScript来操作。例如，修改CSS变量，或者直接修改元素的style.borderColor属性。

总结

自定义CSS加载动画的颜色，尤其是像lds-ripple这样依赖边框来创建视觉效果的动画，其核心在于识别并修改生成这些效果的border属性，而非误用color属性。通过精确地定位CSS规则并调整相应的颜色值，开发者可以轻松地将加载动画与网站的整体设计风格保持一致，从而提升用户界面的美观度和专业性。理解CSS属性的实际作用是高效进行样式定制的关键。

以上就是自定义CSS加载动画颜色：以lds-ripple为例的详细内容，更多请关注php中文网其它相关文章！