[分享]css不同属性获取不同过渡效果

CSS可以通过不同的属性来实现不同的过渡效果。以下是几种常见的过渡效果的实现方法：

/* 颜色渐变过渡效果 */
div {
  background-color: blue;
  transition: background-color 2s ease;
}
div:hover {
  background-color: red;
}

/* 宽度过渡效果 */
p {
  width: 100px;
  transition: width 2s ease;
}
p:hover {
  width: 200px;
}

/* 高度过渡效果 */
img {
  height: 100px;
  transition: height 2s ease;
}
img:hover {
  height: 200px;
}

/* 旋转过渡效果 */
span {
  transform: rotate(0deg);
  transition: transform 2s ease;
}
span:hover {
  transform: rotate(360deg);
} 

以上代码分别实现了背景颜色渐变、宽度、高度和旋转的过渡效果。其中，transition属性用于指定过渡属性、过渡时间和过渡方式。这里的过渡属性就是指需要产生过渡效果的属性，比如background-color、width、height、transform等。

过渡时间通常使用秒数来指定，比如2s，表示过渡需要2秒的时间完成。过渡方式可以使用关键字，如ease、linear、ease-in、ease-out等。不同的过渡方式会产生不同的过渡效果。例如，ease方式会先缓慢，然后加速，最后再缓慢；而linear方式则是匀速的。

通过上述代码的演示，可以看出CSS可以通过不同的属性结合transition属性，实现丰富的过渡效果，为网页添加更加生动的视觉效果。