css3手风琴菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 280px;
margin: 100px auto;
list-style: none;
border: 1px solid #000;
overflow: hidden;
}
ul li {
width: 160px;
height: 100%;
float: left;
transition: all 0.5s;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
}
</style>
</head>
<body>
<ul>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
</body>
</html>
2d过渡照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 400px;
list-style: none;
background-color: skyblue;
position: relative;
}
.wrap li{
width: 150px;
height: 220px;
position: absolute;
box-shadow: 0 0 10px rgba( 0,0,0,0.6);
transition: all 1s;
}
.wrap li:nth-child(1){
left: 100px;
top: 80px;
transform: rotate(30deg);
}
.wrap li:nth-child(2){
left: 300px;
top: 90px;
transform: rotate(-10deg);
}.wrap li:nth-child(3){
left: 500px;
top: 100px;
transform: rotate(50deg);
}
.wrap li:nth-child(4){
left: 700px;
top: 77px;
transform: rotate(-80deg);
}
.wrap li:nth-child(5){
left: 1000px;
top: 77px;
transform: rotate(170deg);
}
.wrap li:hover {
/*transform: rotate(0deg) scale(1.5);*/
transform: scale(1.5);
/*因为会覆盖所以不用写rotate*/
z-index: 1;
}
.wrap li img{
width: 100%;
}
</style>
</head>
<body>
<ul class="wrap">
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
<li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
</ul>
</body>
</html>
css3二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 100px auto;
width: 500px;
height: auto;
border: 1px solid #000;
}
.box {
width: 500px;
height: 50px;
text-align: center;
list-style: none;
}
.box > li {
width: 100px;
height: 50px;
line-height: 50px;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
float: left;
transition: all 0.5s;
}
.box > li:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.stage {
list-style: none;
perspective: 500px;
}
.stage > li {
transform: rotateY(180deg);
opacity: 0;
height: 0;
background-color: rgba(0, 0, 0, 0);
transition: all 1s;
}
.box > li:hover .stage > li {
transform: none;
opacity: 1;
height: 50px;
background-color: rgba(0, 0, 0, 0.6);
}
.box > li:hover .stage > li:nth-child(1) {
transition-delay: 0ms;
}
.box > li:hover .stage > li:nth-child(2) {
transition-delay: 200ms;
}
.box > li:hover .stage > li:nth-child(3) {
transition-delay: 400ms;
}
.box > li:hover .stage > li:nth-child(4) {
transition-delay: 600ms;
}
.box > li .stage > li:nth-child(4) {
transition-delay: 0ms;
}
.box > li .stage > li:nth-child(3) {
transition-delay: 200ms;
}
.box > li .stage > li:nth-child(2) {
transition-delay: 400ms;
}
.box > li .stage > li:nth-child(1) {
transition-delay: 600ms;
}
.stage > li > a {
color: #fff;
}
.text {
background-color: lightgoldenrodyellow;
text-indent: 2em;
line-height: 30px;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="box">
<li>一级菜单
<ul class="stage">
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单
<ul class="stage">
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单
<ul class="stage">
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单
<ul class="stage">
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单
<ul class="stage">
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
<li>
<a href="https://www.baidu.com/">二级菜单</a>
</li>
</ul>
</li>
</ul>
<div class="text">
首先先设置所有的二级菜单沿Y轴旋转180度,在透明的情况下看不见.当鼠标悬停在一级菜上时清除当前的Y轴旋转产生旋转效果,设置当前的透明度为0当鼠标悬停在一级菜单当前的透明度过渡为1,并且为每个二级菜单设置延迟产生时间差,当鼠标移出时反向设置延迟.注意点,因为设置display:none时无法产生过渡效果.当设置visibility:
hidden;和opactiy:0;虽然让元素隐藏但是当前的位置被占据,当鼠标经过虽然看不见元素但却有位置保留的二级菜单是会触发效果,因此为所有的二级菜单设置height:0,来取消占位,当鼠标悬停在一级菜单时二级菜单的height:50;(高度慢慢展现),从而达到完美效果.
</div>
</div>
</body>
</html>
网友评论