第九章 过渡
transition:过渡
过渡时间
transition-duration: 3s;
过渡属性(定义宽还是高)
transition-property: all;
过渡函数(运动的方式)
transition-timing-function: ease;
过渡延迟时间
transition-delay: 4s;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*过渡时间*/
transition-duration: 1s;
/*运动方式*/
transition-timing-function: ease-in-out;
/*延迟时间*/
transition-delay: 2s;
/*过渡属性*/
transition-property: width;
}
div:hover{
width: 1900px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运动方式(贝塞尔曲线)
ease:开始和结束慢 中间快 相当于cubic-bezier(0.25, 0.1, 0.25,1)
ease-in:(加速) 开始慢 相当于cubic-bezier(0.42, 0, 1, 1)
ease-in-out：先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)
ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1)
linear:匀速 相当于cubic-bezier(0, 0, 0.58, 1)
-webkit-transition: 2s width;
safari浏览器需要加前缀，-webkit- ,其他浏览器不需要添加
transition: 2s width, 4s height, 1s background-color;
transition: 2s width, 2s 2s height, 1s 4s background-color;
transition: 3s 2s width, 4s 2s height, 8s 4s background-color;
过渡： 时间 延迟时间 样式 方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*transition: 完成的过渡的时间 延迟的时间 运动的方式 属性;*/
-webkit-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
-moz-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
-ms-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
}
div:hover{
width: 1900px;
height: 800px;
background: blue;
border: 4px solid yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
