CSS3中的元素过渡属性transition示例详解

CSS3中的元素过渡属性transition是指在我们提供一定的时间，从一种CSS样式过渡到另一种样式的效果。它可以实现鼠标滑过、单击、焦点等交互时的过渡效果，是实现网页动画效果的重要技术之一。本文将介绍transition的用法、示例，并提供代码和效果演示。

语法格式

transition有若干个可设的值，包括：

• transition-property：过渡的CSS属性名称。多属性过渡，用逗号隔开。

• transition-duration：过渡的时间长度。

• transition-timing-function：过渡的速度曲线。

• transition-delay：过渡延迟的时间长度。

基本语法格式

/* Apply to 1 property */
-webkit-transition: property duration timing-function delay;
transition: property duration timing-function delay;

/* Apply to 2 properties */
-webkit-transition: property1 duration1 timing-function1 delay1, property2 duration2 timing-function2 delay2;
transition: property1 duration1 timing-function1 delay1, property2 duration2 timing-function2 delay2;

示例说明1: 图片过渡效果

html代码

<div class="img-wrapper">
  <img src="https://picsum.photos/id/317/500/300" alt="">
  <img src="https://picsum.photos/id/525/500/300" alt="">
</div>

css代码

.img-wrapper {
  display: flex;
}
.img-wrapper img:hover {
  transition: width 0.3s;
}
.img-wrapper img:nth-child(1):hover {
  width: 70%;
}
.img-wrapper img:nth-child(2):hover {
  width: 30%;
}

效果演示：

解释说明：

利用flex布局，将两张图片横向排列，鼠标滑过时，利用transition属性实现图片宽度从默认状态下 width: 50%，到鼠标移动到相应的图片上时的宽度变化。

示例说明2: 文字和图片hover效果

html代码

<div class="example2-wrapper">
  <div class="content">
    <h2>宝贝一口价1299元现货此刻就抢购！</h2>
    <a href="#" class="btn btn-primary">立即抢购</a>
  </div>
  <img src="https://picsum.photos/id/237/500/300" alt="">
</div>

css代码

.example2-wrapper{
  position:relative;
}
.example2-wrapper img{
  transition: all 1s;
}
.example2-wrapper:hover img{
  transform: scale(1.1);
}
.content{
  position:absolute;
  top:50%;
  left:100px;
  transform: translateY(-50%);
  z-index:10;
  color:#fff;
}
.content .btn{
  margin-top:20px;
  padding:8px 16px;
  font-size:16px;
  background-color:#4c9ffa;
  border-color:#4c9ffa;
  border-radius:4px;
}
.content .btn:hover{
  background-color:#388bff;
  border-color:#388bff;
}

效果演示：

解释说明：

利用position：relative属性将图片容器设置为定位父元素，我们利用z-index属性来设置文字的层级高度，即文字在图片之上的显示层级。当鼠标悬停时，通过transform属性设置图片的大小从原来的1倍放大至1.1倍，实现hover效果。当鼠标悬停在按钮上时，通过transition属性搭配:hover伪类，设置按钮的样式发生渐变变化，实现点击按钮之后的hover效果。

结语

本文通过两个精心的transition效果示例，为大家展示了过渡属性的用法和实际应用场景。transition属性在前端开发中应用非常广泛，掌握该属性的用法，可以帮助我们更高效便捷地完成前端项目的开发。