[分享]css3动画的相关代码

CSS3动画能够让网页变得更加生动和有趣，包括过渡动画和关键帧动画，今天我们就来学习一下如何实现CSS3动画效果。//实现一个简单的过渡动画 .box { backgroundcolor: 2ecc7...

CSS3动画能够让网页变得更加生动和有趣，包括过渡动画和关键帧动画，今天我们就来学习一下如何实现CSS3动画效果。

//实现一个简单的过渡动画
.box {
  background-color: #2ecc71;
  width: 100px;
  height: 100px; 
  transition: background-color 1s;
}
.box:hover {
  background-color: #3498db;
}

上述代码使用了transition属性，并设置过渡时间为1秒，当鼠标悬停在盒子上时，盒子的背景色会平滑地过渡到另一种颜色。

//实现一个简单的关键帧动画
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.box {
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  animation: pulse 2s infinite;
}

上述代码中使用了@keyframes定义了一个名为pulse的关键帧动画，动画包括了3个关键帧，分别是0%、50%、100%。同时通过animation属性让盒子实现了pulse动画，并且设置了循环次数为infinite，即无限循环。

通过以上两个例子，我们可以初步了解CSS3动画的实现方式，包括了过渡动画和关键帧动画。在实际应用中，我们可以结合JavaScript动态控制CSS3动画的播放，给网页带来更加丰富的视觉效果。