返回

用CSS 点亮冬日，打造温暖的加载动画☕

前端

在寒冷的冬日里，没有什么比一杯热腾腾的咖啡更让人暖心了。同样，当我们在浏览网页时，看到一个精致的加载动画，也能让我们感到一丝惬意。今天，我们就来用CSS制作一个这样的动画，为冬日增添一抹温暖。

灵感来源

前几天在浏览网页时，我无意间看到了一款特别的加载动画。它是一个旋转的咖啡杯，上面冒着热气，看起来非常温暖人心。于是我决定深入研究它的原理，并将其分享给大家。

原理分析

这个动画的原理并不复杂。它使用了一个简单的 div 元素，并通过 CSS 动画创建旋转和冒热气效果。

  1. 旋转效果： 使用 CSS 的 animation 和 transform 属性，可以使 div 元素沿中心点旋转。
  2. 冒热气效果： 使用 ::after 伪元素和 animation 属性，可以创建从 div 元素中冒出的 "热气"。

实现步骤

  1. 创建 HTML 结构： 使用一个 div 元素作为咖啡杯的容器。
  2. 添加 CSS 样式： 设置 div 的基本样式，包括大小、边框和颜色。
  3. 创建旋转动画： 使用 animation 和 transform 属性创建旋转动画。
  4. 创建冒热气动画： 使用 ::after 伪元素和 animation 属性创建冒热气动画。

代码示例

<div class="coffee-cup"></div>

.coffee-cup {
  width: 100px;
  height: 100px;
  border: 5px solid #ccc;
  border-radius: 50%;
  background: #fff;
  position: relative;
}

.coffee-cup::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f9f9f9;
  animation: steam 1s infinite alternate;
}

@keyframes steam {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

成品效果

以上代码会生成一个旋转的咖啡杯，上面冒着热气。你可以根据自己的需要调整 CSS 样式，以创建不同的颜色、大小或形状的加载动画。

结语

使用 CSS 创建加载动画是一种简单而有趣的方式，可以为你的网页增添一抹个性和互动性。特别是像本文中的咖啡杯动画这样的冬季主题动画，可以在寒冷的天气里为用户带来一丝温暖。希望这个教程能激发你的灵感，创作出更多令人惊叹的加载动画！