CSS3渐变、过渡

作者：System 时间：2024年08月16日分类：所有,css3 字数：693

这篇文章距离上次修改已过231天，其中的内容可能已经有所变动。

CSS3 渐变（Gradients）和过渡（Transitions）是网页设计中非常有用的功能。

渐变：

CSS3 提供了两种类型的渐变 - 线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。

线性渐变：




.linear-gradient {
  background: linear-gradient(to right, red , blue);
}

径向渐变：




.radial-gradient {
  background: radial-gradient(circle, red, yellow, green);
}

过渡：

过渡可以在不使用Flash或JavaScript的情况下，在状态之间更改CSS属性。




.transition {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
  /* 当鼠标悬停时改变背景色 */
}
 
.transition:hover {
  background-color: blue;
}

在上述代码中，.transition 类定义了一个背景颜色为红色的元素，并且当鼠标悬停在该元素上时，背景色会在0.5秒内从红色平滑地过渡到蓝色。这种过渡效果是由 transition 属性实现的，它定义了哪个属性应该被变化、变化需要多久以及使用哪种过渡效果。

CSS3渐变、过渡

评论已关闭

推荐阅读