过渡(CSS3)

最新推荐文章于 2024-11-01 19:34:36 发布

陈开心i

最新推荐文章于 2024-11-01 19:34:36 发布

阅读量159

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/CCT912097957/article/details/105280315

版权

本文深入探讨CSS3的过渡(transition)特性，介绍如何在不使用Flash或JavaScript的情况下，为元素样式变化添加平滑动画效果。通过具体示例，讲解transition属性的语法格式及其在实际网页设计中的应用。

摘要由CSDN通过智能技术生成

过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

语法格式:

transition: 要过渡的属性花费时间运动曲线何时开始;

div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
			transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
			/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

			width: 600px;
			height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all，后面俩个属性可以省略 */