web前端基础——过渡效果

CSS3过渡效果详解：transition属性的实战应用

原创已于 2022-03-04 10:54:26 修改 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#安全 #网络 #https

于 2022-03-02 17:05:12 首次发布

web前端基础专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS3 transition属性的使用，包括其作用、常见取值及如何配合:hover实现交互式过渡效果。通过样例代码演示了如何设置元素宽度和背景颜色的平滑过渡，以及如何设置过渡的所有属性和指定时长。

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互的内容

属性名：transition

常见取值：

参数	取值
过渡的属性	`all`：所有能过渡的属性都过渡，比如填`width`，则只有width能过渡
过渡的时长	数字+ `s`（秒）

注意

只有默认状态和hover状态的样式不同，才能有过渡的效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果是不同的，比如给hover状态设置，则只有鼠标移入时，才有过渡效果

样例代码

.box{
	width:200px;
	height:200px;
	background-color:pink;

/* 宽度200，悬停的时候宽度600，花费时间1秒钟   */
	transition: width 1s, background-color 2s;
/*  过渡所有的属性，花费时间1秒钟  */
/*	transition: all 1s;  */
}

.box:hover{
	width:600px;
	background-color:red;
}