[分享]css具有代表性的动画

CSS是前端开发中不可或缺的一部分，其中的动画效果更是为网页增添了不少生动活泼的气息。下面我们将介绍一些具有代表性的CSS动画。/1. 跑马灯效果/ /使用animation循环滚动backgroun...

CSS是前端开发中不可或缺的一部分，其中的动画效果更是为网页增添了不少生动活泼的气息。下面我们将介绍一些具有代表性的CSS动画。

/*1. 跑马灯效果*/
/*使用animation循环滚动background-position，达到文字滚动的效果*/
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 6rem 100%;
  animation: marquee 5s linear infinite;
}

/*关键帧，定义background-position在时间线上的变化*/
@keyframes marquee {
  to {
    background-position: -6rem 0;
  }
}

/*2. 翻转卡片效果*/
/*使用CSS3 transform属性实现翻转，同时使用transition过渡效果*/
.flip-card {
  position: relative;
  width: 200px;
  height: 200px;
}

.flip-card .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card .flip-card-front, .flip-card .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card .flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card .flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/*3. 加载中动画*/
/*使用animation旋转动画，结合linear-gradient实现渐变色效果*/
.loading {
  position: relative;
  width: 80px;
  height: 80px;
}

.loading:after {
  content: ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #333;
  border-top-color: #09c;
  animation: loading-rotate 2s linear infinite;
  background: linear-gradient(to bottom, #eee 0%, #09c 100%);
}

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

以上三个动画，分别是跑马灯效果、翻转卡片效果和加载中动画。它们通过不同的CSS属性和关键帧动画，实现了不同的视觉效果，能够为网页增加更多的趣味性和动态感。