28个炫酷的纯CSS特效动画示例（含源代码）

在网页设计中，CSS动画能够有效提升用户体验和页面的互动性。通过简单的CSS代码，我们可以创建出各种炫酷的动画效果。接下来，我将为大家介绍28个纯CSS特效动画示例，包含源代码供大家参考和学习。

1. 渐变加载动画

使用CSS渐变，可以制作出非常炫酷的加载效果。

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

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(270deg, #ff7e5f, #feb47b);
  background-size: 300% 300%;
  animation: gradient 3s ease infinite;
}

2. 跳动的心形

利用CSS动画让心形图案进行跳动效果。

<div class="heart"></div>

.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(-45deg);
  animation: heartbeat 1s infinite;
}

.heart:before,
.heart:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.heart:before {
  top: -50px;
  left: 0;
}

.heart:after {
  left: 50px;
  top: 0;
}

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

3. 旋转的方块

简单的方块旋转效果，可以用于按钮或图片。

<div class="cube"></div>

.cube {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotate 2s infinite linear;
}

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

4. 文字打字效果

通过CSS实现打字机效果，为网页文本添加动态感。

<div class="typewriter">
  <h1>Hello, World!</h1>
</div>

.typewriter h1 {
  overflow: hidden; /* Ensures the text is hidden initially */
  border-right: .15em solid orange; /* The cursor */
  white-space: nowrap; /* Prevents the text from wrapping */
  margin: 0 auto; /* Gives that scrolling effect */
  letter-spacing: .15em; /* Spacing between letters */
  animation: typing 3.5s steps(30, 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: orange; }
}

5. 旋转的圆圈

让圆圈持续旋转的效果，适合用于加载提示。

<div class="spin-circle"></div>

.spin-circle {
  width: 100px;
  height: 100px;
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

6. 缩放的按钮

让按钮在鼠标悬停时有缩放效果，增加互动性。

<button class="scale-button">Hover Me</button>

.scale-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.2s;
}

.scale-button:hover {
  transform: scale(1.2);
}

7. 渐变背景动画

让背景持续变化，使网页更具活力。

body {
  height: 100vh;
  margin: 0;
  background: linear-gradient(45deg, #ff6b6b, #f7d9a0);
  background-size: 200% 200%;
  animation: gradient-animation 4s ease infinite;
}

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

以上这些纯CSS动画效果示例，不仅可以提高网页的用户体验，还能使网页视觉上更吸引人。您可以根据需要进行修改和扩展，创造出更多自己喜欢的效果。在现代Web开发中，掌握CSS动画技术将让您的作品更具竞争力。在本站后续文章中，我们将继续分享更多的动画效果和实现方式，敬请关注！