介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
过渡
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
*{
margin:0;
padding:0
}
.box1{
width:800px;
height:800px;
background-color:silver;
overflow:hidden;
}
.box1 div{
width:100px:
height:100px;
marging-bottom:100px;
}
.box2{
background-color:#bfa;
1、过渡(transition)
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果,提升用户体验
transition:all 2s;
2、transition-property: 指定要过渡的属性
多个属性间使用 , 隔开
如果所有属性都需要过渡,则使用all关键字
大部分属性都支持过渡效果(值可以计算的,颜色。。),注意过渡时必须从一个有效值
向另外一个有效值过渡。(不能从auto 过渡)
transition-property:width/all
3、transition-duration: 指定过渡效果的持续时间
时间单位 s 和 ms
可以给属性分别指定过渡时间,使用逗号隔开
transition-duration:2s 1s;
4、transition-timing-function :过渡的时间函数
指定过渡的执行方式
可选值:
ease 默认值 先加速再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier() 来指定时序函数
steps() 分步执行过渡效果
可以设置 第二个值
end:表示在时间结束时执行过渡(默认值)
start: 在时间开始时执行过渡
transition-timing-function:steps(2,end)
5、transition-delay
过渡效果的延迟,等待相应的时间后再执行过渡
6、transition 过渡的简写属性,可以同时设置过渡的相关所有
属性,只有一个要求,如果要写延迟,则第一个为持续时间,第二个为延迟时间
transition:margin-left 2s
}
.box3{
background-color:orange
}
.box1:hover .box2{
width:200px;
height:200px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.box1{
height:71px;
/*一个兔子的宽度*/
width:132px;
background-image:url("");
background-position:0 0;
transition:2s steps(3)
}
。
.box1:hover{
background-position:-396px 0
}
</style>
<body>
<div class="box1">
</div>
</body>