css3animation例子：CSS3动画实例解析，从基础到创意效果

来源：网络作者：日期：2025-11-07 18:18:26

在现代网页设计中，CSS3动画已成为提升用户体验的重要手段，本文将通过多个实例，展示CSS3动画的强大功能和创意应用,帮助开发者快速掌握这一核心技术。

基础闪烁效果

最简单的CSS3动画莫过于闪烁效果,常用于吸引用户注意或突出重要元素：

<div class="flash">点击这里</div>

.flash {
  animation: flash 1s infinite;
}
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

文字打字效果

模拟文字逐字输入的动画效果,增强内容呈现的趣味性：

<p class="typewriter">"Hello, this text is typing effect!"</p>

.typewriter {
  overflow: hidden; /* 隐藏超出内容 */
  border-right: .15em solid #333; /* 设置闪烁光标 */
  white-space: nowrap; /* 防止换行 */
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #333 }
}

旋转木马效果

实现图片轮播的旋转木马效果,无需JavaScript即可完成：

css3animation例子：CSS3动画实例解析，从基础到创意效果

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
  </div>
</div>

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.carousel-inner {
  width: 600%; /* 三倍宽度 */
  height: 100%;
  position: absolute;
  animation: carousel 15s linear infinite;
}
.carousel-item {
  width: 33.33%;
  height: 100%;
  float: left;
}
@keyframes carousel {
  0% { transform: translateX(0); }
  20% { transform: translateX(-33.33%); }
  40% { transform: translateX(-66.66%); }
  60% { transform: translateX(-100%); }
  80% { transform: translateX(-133.33%); }
  100% { transform: translateX(-166.66%); }
}

3D翻转卡片

创建具有立体感的卡片翻转效果,展示前后两面内容：

<div class="card">
  <div class="card-face front">Front</div>
  <div class="card-face back">Back</div>
</div>

.card {
  width: 200px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}
.card:hover {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-face.back {
  transform: rotateY(180deg);
}

复杂粒子效果

通过CSS3动画创建动态粒子背景：

<div class="particles">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <!-- 更多粒子 -->
</div>

.particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 5px; height: 5px;
  background: #333;
  border-radius: 50%;
  animation: float 15s infinite linear;
}
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; }
}