*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrap{
width: 100vw;
height: 100vh;
background-color:black;
display: flex;
/* x轴居中 */
justify-content: center;
/* y居中 */
align-items: center;
}
.wrap ul{
width: 80%;
height: 80%;
/* background-color: white; */
/* border: 1px solid white; */
/* 弹性盒模型 */
display: flex;
/* 两端对齐 */
justify-content: space-between;
align-items: center;
}
.wrap li{
width: 16%;
height: 100%;
background: #333;
border-radius: 20px;
overflow: hidden;
transition: width 0.5s linear,height 0.5s linear 0.5s;
}
.wrap li .inner{
width: 100%;
height: 100%;
position: relative;
transition: 0.5s linear;
}
.wrap .init li .inner{
transform: translateY(100%);
}
/* 延迟 */
.wrap li:nth-child(1) .inner{
transition-delay :0.1s ;
}
.wrap li:nth-child(2) .inner{
transition-delay :0.2s ;
}
.wrap li:nth-child(3) .inner{
transition-delay :0.3s ;
}
.wrap li:nth-child(4) .inner{
transition-delay :0.4s ;
}
.wrap li:nth-child(5) .inner{
transition-delay :0.5s ;
}
.wrap li:nth-child(6) .inner{
transition-delay :0.6s ;
}
.wrap li:hover .inner .bg{
opacity: 1;
}
.wrap li .inner .bg{
width: 100%;
height: 100%;
background-size: cover;
background-position:center ;
opacity: 0.5;
transition: .2s linear;
}
.wrap li:nth-child(1) .inner .bg{
background-image:url(./images/1.jpg);
}
.wrap li:nth-child(2) .inner .bg{
background-image:url(./images/2.jpg);
}
.wrap li:nth-child(3) .inner .bg{
background-image:url(./images/3.jpg);
}
.wrap li:nth-child(4) .inner .bg{
background-image:url(./images/4.jpg);
}
.wrap li:nth-child(5) .inner .bg{
background-image:url(./images/5.jpg);
}
.wrap li:nth-child(6) .inner .bg{
background-image:url(./images/6.jpg);
}
/* 标题 */
.wrap li h2{
font-size: 16px;
color: white;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
/* 线性过渡 */
transition: 0.2s linear;
position: absolute;
opacity: 1;
}
.wrap li:hover h2{
font-size: 24px;
}
#activeWrap li h2{
opacity: 0;
}
#activeWrap li:not(.active){
height: 0;
width: 0;
}
#activeWrap li.active{
width: 100%;
}
#activeWrap li{
transition: height 0.5s linear,width 0.5s linear 0.5s;
}
.wrap li .direction{
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 30px;
line-height: 30px;
position: absolute;
top: 50px;
opacity: 0;
}
.wrap li .direction .header{
color: #fff;
font-size: 24px;
}
.wrap li .direction .close{
cursor: pointer;
position: relative;
width: 30px;
height: 30px;
}
.wrap li .direction .close::before,.wrap li .direction .close::after{
content: "";
width: 30px;
height: 4px;
position: absolute;
top: 50%;
margin-top: -2px;
background-color: #fff;
}
.wrap li .direction .close::before{
transform: rotate(45deg);
}
.wrap li .direction .close::after{
transform: rotate(-45deg);
}
#activeWrap li .direction{
opacity: 1;
transition: 0.5s linear;
}
#activeWrap li .direction .close{
transform:rotate(365deg);
transition: 0.5s linear;
}
var ul = document.querySelector('.wrap ul');
var lis = document.querySelectorAll('.wrap ul li');
var closeBtns = document.querySelectorAll('.wrap .close')
var last = null;
var timer = setTimeout(function(){
ul.className = '';
},200);
lis.forEach(function(li,index){
li.onclick = function(){
ul.setAttribute('id','activeWrap');
last && (last.className = '');
this.className = "active";
last = this;
}
// 事件冒泡了，要添加ev
closeBtns[index].onclick = function(ev){
ul.removeAttribute('id');
lis[index].className = '';
last = null;
ev.cancelBubble = true;
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="wrap">
<ul class="init">
<li>
<div class="inner">
<div class="bg"></div>
<h2>image1</h2>
<div class="direction">
<div class="header">1</div>
<div class="close"></div>
</div>
</div>
</li>
<li>
<div class="inner">
<div class="bg"></div>
<h2>image2</h2>
<div class="direction">
<div class="header">2</div>
<div class="close"></div>
</div>
</div>
</li>
<li>
<div class="inner">
<div class="bg"></div>
<h2>image3</h2>
<div class="direction">
<div class="header">3</div>
<div class="close"></div>
</div>
</div>
</li>
<li>
<div class="inner">
<div class="bg"></div>
<h2>image4</h2>
<div class="direction">
<div class="header">4</div>
<div class="close"></div>
</div>
</div>
</li>
<li>
<div class="inner">
<div class="bg"></div>
<h2>image5</h2>
<div class="direction">
<div class="header">5</div>
<div class="close"></div>
</div>
</div>
</li>
<li>
<div class="inner">
<div class="bg"></div>
<h2>image6</h2>
<div class="direction">
<div class="header">6</div>
<div class="close"></div>
</div>
</div>
</li>
</ul>
</div>
<script src="demo.js"></script>
</body>
</html>
来源：CSDN
作者：哪天才能学到vue
链接：https://blog.csdn.net/qq_42177478/article/details/104172829