css制作简单动画效果图

CSS是一种编写样式的语言，它可以用来设计和美化网页。除了可以设置各种颜色、字体、边框外，它还可以用来制作简单的动画效果。下面我们来看一些具有代表性的CSS动画效果。

/* 缩放效果 */
.Box {
  transition: transform 0.5s;
}
.Box:hover {
  transform: scale(1.2);
}

/* 抖动效果 */
.Box {
  position: relative;
  animation: shake 0.5s;
}
@keyframes shake {
  0% {transform: translate(0,0);}
  10% {transform: translate(-10px,0);}
  20% {transform: translate(10px,0);}
  30% {transform: translate(-10px,0);}
  40% {transform: translate(10px,0);}
  50% {transform: translate(-10px,0);}
  60% {transform: translate(10px,0);}
  70% {transform: translate(-10px,0);}
  80% {transform: translate(10px,0);}
  90% {transform: translate(-10px,0);}
  100% {transform: translate(0,0);}
}

/* 旋转效果 */
.Box {
  transition: transform 0.5s;
}
.Box:hover {
  transform: rotate(360deg);
}

/* 渐变效果 */
.Box {
  background: linear-gradient(to right,#ff8000,#ffc800);
  transition: background 0.5s;
}
.Box:hover {
  background: linear-gradient(to right,#ffc800,#ff8000);
}

缩放效果可以让元素在鼠标移上去时变大，抖动效果可以让元素在鼠标移上去时左右晃动，旋转效果可以让元素在鼠标移上去时旋转一圈，渐变效果可以让元素在鼠标移上去时颜色渐变。以上动画效果的关键就是使用了CSS的transition属性和animation属性，对元素进行了样式的变化，从而实现了动画效果。