HTML---利用CSS3制作网页动画

在HTML和CSS3的帮助下，我们可以创建各种网页动画。以下是一些例子：

1. 创建一个简单的淡入淡出动画：

HTML:

<div class="fade">淡入淡出动画</div>

CSS:

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

2. 创建一个移动动画：

HTML:

<div class="move">移动动画</div>

CSS:

.move {
  animation: moveRight 2s infinite;
  position: relative;
}
 
@keyframes moveRight {
  0% {left: 0;}
  100% {left: 200px;}
}

3. 创建一个旋转动画：

HTML:

<div class="rotate">旋转动画</div>

CSS:

.rotate {
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

4. 创建一个缩放动画：

HTML:

<div class="scale">缩放动画</div>

CSS:

.scale {
  animation: scale 2s infinite;
}
 
@keyframes scale {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);}
}

以上代码展示了如何使用CSS3的@keyframes规则和animation属性来创建简单的动画。这些动画可以应用于任何HTML元素，并可以通过调整时长、迭代次数和其他属性来控制动画的行为。