day8 CSS3渐变gradients+CSS3过渡transition

CSS3渐变gradients和CSS3过渡transition可以一起使用来创建更加动感和引人入胜的网页效果。以下是一个简单的例子，展示了如何将渐变和过渡结合使用：

HTML:




<div class="box"></div>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue; /* 初始背景颜色 */
  transition: background-color 1s; /* 过渡效果 */
}
 
.box:hover {
  background-image: linear-gradient(to right, red, yellow); /* 鼠标悬停时的渐变背景 */
}

在这个例子中，.box元素在没有鼠标悬停时显示为一个简单的蓝色背景。当鼠标悬停在元素上时，背景色会立即改变为从左到右红色到黄色的线性渐变色。过渡效果使得颜色的变化更为平滑和自然。

day8 CSS3渐变gradients+CSS3过渡transition

评论已关闭

推荐阅读