[分享]css3效果过渡动画

CSS3（Cascading Style Sheets 3）是一种用于网页设计的样式表语言，可以实现网页的样式和布局。而CSS3中提供了丰富的过渡动画效果，可以让网页的交互更加生动和有趣。/示例1：渐...

CSS3（Cascading Style Sheets 3）是一种用于网页设计的样式表语言，可以实现网页的样式和布局。而CSS3中提供了丰富的过渡动画效果，可以让网页的交互更加生动和有趣。

/*示例1：渐隐渐现*/

.box{
  background-color:#ccc;
  transition:all 1s ease;
}

.box:hover{
  opacity:0;
} 

上述代码可以实现鼠标悬浮在盒子上时，盒子内的内容逐渐消失。CSS3中， transform、opacity、transition等属性可以控制元素的大小、位置、透明度等方面的变化。上述代码用到了transition属性，它可以为一个或多个CSS属性添加过渡效果，控制过渡的时间、速度和样式。在本例中，整个box元素因为hover而产生了渐隐的效果。

/*示例2：旋转*/

.box{
  background-color:#ccc;
  transition:all 1s ease;
}

.box:hover{
  transform:rotate(180deg);
} 

上述代码可以实现鼠标悬浮在盒子上时，盒子内的内容逆时针旋转180度。transform属性可以实现元素的3D变换，包括旋转、缩放、倾斜、位移等。在本例中，因为hover，整个box元素的transform属性产生了旋转的效果。

/*示例3：阴影*/

.box{
  background-color:#ccc;
  transition:all 1s ease;
  box-shadow:2px 2px #666;
}

.box:hover{
  box-shadow:10px 10px #666;
} 

上述代码可以实现鼠标悬浮在盒子上时，盒子内的内容产生了一个阴影效果。box-shadow属性可以控制元素的阴影样式和位置。在本例中，因为hover，整个box元素的box-shadow属性发生了变化，由2px的阴影变为了10px的阴影。

以上是CSS3过渡动画效果的一些实例。利用这些效果可以让网页更加生动有趣，更好地实现视觉效果的传达。