楼梯效果
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#warp{
width: 800px;
margin: 0 auto;
}
.box{
width: 100%;
height: 700px;
background: red;
color: #fff;
text-align: center;
font-size: 100px;
border: 3px solid yellow;
}
ul{
list-style: none;
position: fixed;
top:300px;
left:100px;
width: 60px;
/*display: none;*/
transform: scale(0);
transition: 1s;
}
li{
width: 100%;
height: 60px;
border: 1px solid red;
color: green;
font-size: 15px;
text-align: center;
line-height: 60px;
background: #ccc;
}
li:hover{
background: yellow;
}
</style>