菜鸟教程
教程 css tutorial

实战案例

本案例结合 @keyframes 和多种动画属性，构建一个动效卡片交互组件，模拟页面加载或提醒提示。

目标

  • 使用 @keyframes 定义动画
  • 控制动画时长、循环、延迟与方向
  • 利用 hover 和 infinite 增强互动体验

动画实战示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 动画实战案例</title>
<style>
body {
background-color: #f1f8e9;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}


.card {
  width: 240px;
  height: 140px;
  background-color: #fffde7;
  border: 2px solid #fbc02d;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #f57f17;
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.card:hover {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}



</style>
</head>


<body>
<div class="card">加载完成</div>
</body>


</html>

相关内容