手风琴
<style>
ul {
width: 810px;
height: 300px;
}
ul li{
width: 270px;
height: 300px;
border: 1px solid #000;
float: left;
box-sizing: border-box;
list-style: none;
transition: width 1s;
}
ul:hover li{
width: 50px;
}
ul li:hover{
width: 710px;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
翻转菜单
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 600px;
height: 60px;
background-color: grey;
margin: 200px auto;
}
.father>li {
width: 170px;
height: 60px;
line-height: 60px;
background-color: #000;
margin-left: 22.5px;
list-style: none;
float: left;
font-size: 35px;
color: white;
text-align: center;
}
.son>li {
background-color: lightcoral;
width: 170px;
line-height: 60px;
list-style: none;
float: left;
font-size: 35px;
color: white;
text-align: center;
transform: rotateY(180deg);
transition: all 1s;
opacity: 0;
perspective: 300px;
}
.father>li:hover .son>li {
transform: none;
opacity: 1;
}
.father>li:hover .son>li:nth-of-type(1) {
transition-delay: 0ms;
}
.father>li:hover .son>li:nth-of-type(2) {
transition-delay: 100ms;
}
.father>li:hover .son>li:nth-of-type(3) {
transition-delay: 200ms;
}
.father>li:hover .son>li:nth-of-type(4) {
transition-delay: 300ms;
}
.father>li .son>li:nth-of-type(4) {
transition-delay: 0ms;
}
.father>li .son>li:nth-of-type(3) {
transition-delay: 100ms;
}
.father>li .son>li:nth-of-type(2) {
transition-delay: 200ms;
}
.father>li .son>li:nth-of-type(1) {
transition-delay: 300ms;
}
</style>
<body>
<ul class="father">
<li>点我
<ul class="son">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>点我
<ul class="son">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>点我
<ul class="son">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
</ul>
</body>