CSS loader小技巧：创意非凡、赏心悦目

2024-01-12 05:15:41

理解CSS Loader的作用

CSS loader不仅能够增强用户体验，在视觉上提供等待过程中的反馈，还能通过精心设计的动画表达网站的品牌风格或个性。下面将分享几个创意非凡且赏心悦目的CSS loader实现方法。

圆形旋转加载器

圆形旋转加载器是最常见的CSS loader之一，其简单的设计使其具有较高的可用性，并能轻松适应各种主题和品牌视觉元素。

代码示例

.loader {
  border: 8px solid #f3f3f3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: loaderSpin 1s linear infinite;
}

@keyframes loaderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

操作步骤

将上述CSS代码添加到网站的样式表中。
在HTML页面中创建一个div元素，并赋予类名.loader，例如：<div class="loader"></div>。

双线旋转加载器

双线旋转加载器通过两条线条以不同速度旋转来创造出更复杂的动画效果。这种设计可以为网站提供更动感的等待体验。

代码示例

.loader {
  position: relative;
}

.loader::before, .loader::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #6495ed;
  border-radius: 10%;
}

.loader::before {
  top: 0; left: 0;
  animation: loaderSpinTop 1s linear infinite;
}

.loader::after {
  bottom: -30px; right: 0;
  animation: loaderSpinBottom 1.5s linear infinite;
}

@keyframes loaderSpinTop {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes loaderSpinBottom {
  from { transform: rotate(-360deg); }
  to { transform: rotate(0deg); }
}

操作步骤

将这段CSS代码加入到网站的样式表中。
添加一个div元素至HTML页面，并赋予类名.loader，例如：<div class="loader"></div>。

脉冲加载器

脉冲加载器通过持续变化大小和颜色透明度来模拟心跳效果。这种设计可以为网站增添更多活力和动感。

代码示例

.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff6f61;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  from { transform: scale(1); opacity: .7; }
  to { transform: scale(.8); opacity: 1; }
}