<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css高级样式</title>
<style>
.box{
width:200px;
height:200px;
background-color:green;
/* transition:过渡 */
/* transition:过渡属性 过渡花费的时间 速度曲线 延迟时间*/
transition:background-color 5s;
}
/* 鼠标悬停伪类 */
.box:hover{
background-color:red;
}
.box1{
width:200px;
height:200px;
background-color:red;
transition:width 5s,background-color 5s;
/* all:全部/所有的 */
transition:all 5s ease-out 5s;
/* 速度:ease 慢--快--慢，默认值*/
/* linear:匀速 */
/* ease-in 低速开始*/
/* ease-out 低速结束 */
/* ease-in-out 低速开始和结束 */
}
.box1:hover{
width:800px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
`````
扫一扫
04-25
5420
5420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
