前言
Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
CSS transition
定义和用法
transition:过渡,是一个简写属性,用于设置四个过渡属性:
transition-property:过渡效果的CSS属性名称
- transition-duration:过渡效果持续时间,尽量>=0
transition-timing-function:过渡效果的速度曲线
- transition-delay:过渡效果延迟触发时间
注:请始终设置 transition-duration 属性大于0。否则时长为 0,就不会产生过渡效果。
语法:
四种属性的详细定义:
transition-property
说明:规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。
注:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
语法:transition-property可能的值:
- none:没有属性会获得过渡效果
- all:所有属性都将获得过渡效果
- property:定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔
注:property是指css属性的名称,比如width、height之类的,是泛指,不要写成:transition-property:property,正确应该是transition-property:width、transition-property:width,height
示例
<html>
<head>
<style type="text/css">
.item {
background-color: #51c4d3;
width: 500px;
height: 300px;
transition-property:height;/* 过渡属性为height*/
transition-duration: 2s;/*过渡时间为2s*/
}
.item:hover{
height: 500px;
}
</style>
</head>
<body>
<div class="item"></div>
</div>
</body>
</html>
效果图如下:
其中
transition-property:height;
transition-duration: 2s;
可以合写为:
transition:height 2s;
如果在transition中不写height,但是在hover那里指出过渡的属性,效果也是一样的(这是因为transition那里不写,默认是all,也就是所有属性都需要进行过渡,但是在hover那里设置过渡变化只有height,所以高度还是会变化的)
/*不写height*/
transition: 2s;
但是如果写为:
<html>
<head>
<style type="text/css">
.item {
background-color: #51c4d3;
width: 500px;
height: 300px;
transition:width 2s;/* 过渡属性:宽度 时间:2s*/
}
.item:hover{
height: 500px;/* 高度变化 */
}
</style>
</head>
<body>
<div class="item"></div>
</div>
</body>
</html>
结果会是高度发生了变化,因为经过在transition中声明width属性过渡,但是在hover中,并没有说明width的变化,而声明了height的变化,所以高度发生变化,而宽度不会
transition-duration
说明:过渡持续时间
如果为0,则观察不到过渡效果,一般设置大于0
transition-timing-function
说明:过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。
有以下一些值:
transition-delay
说明:定过渡效果何时开始。默认数值为0。
transition-delay 值以秒或毫秒计。
结语
学习于:
https://www.w3school.com.cn/cssref/pr_transition.asp
结合教程学习基础,同时再动手敲代码。
上述理解仅为个人理解,如有不正确的地方,欢迎您的指出~