制作一个简单的手风琴
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴</title>
<style>
div.box{
position:absolute;
top:150px;
left:0px;
}
div.box div{
margin-bottom:3px;
width:130px;
height:30px;
background:pink;
transform:translateX(-100px);
transition:all 0.3s linear;
}
div.box:hover div{
transform:translateX(0px);
}
div.box div i{
float:right;
width:30px;
height:30px;
line-height:30px;
font-size: 14px;
text-align:center;
background:orange;
}
div.box div:nth-of-type(1){
transition-delay:0.05s;
}
div.box div:nth-of-type(2){
transition-delay:0.1s;
}
div.box div:nth-of-type(3){