【html+css+原生js实现炫酷照片展开效果-----女友相册的正确打开方式（详细）】
1.先看效果。有动画效果，截图效果不大明显。copy代码运行可以展示完整效果。
2.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>照片展开</title>
<link rel="stylesheet" type="text/css" href="css/list.css"/>
</head>
<body>
<div id="box">
<ul>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic1</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic2</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic3</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic4</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic5</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic6</div>
<div class="close">x</div>
</div>
</div>
</li>
</ul>
</div>
<script src="js/list.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
3.css文件。
*{
margin: 0px;
padding: 0px;
}
#box ul{
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
#box{
width:100vw;
height: 100vh;
background: black;
display: flex;
justify-content: center;/*水平居中*/
align-items: center;
}
#box ul {
width: 80vw;
height: 80vh;
display: flex;
justify-content: space-between;
align-items: center;
}
#box ul li{
background: steelblue;
border-radius: 10px;
width: 15%;
color: white;
height: 100%;
position: relative;
overflow: hidden;
transition: .8s linear;
}
#box ul li .wrapper{
position: relative;
width: 100%;
height: 100%;
transition: .5s ease-in-out;
}
#box ul li .deley{
transform: translateY(100%);
}
#box ul li:nth-child(1) .wrapper{
transition-delay: .3s;
}
#box ul li:nth-child(2) .wrapper{
transition-delay: .4s;
}
#box ul li:nth-child(3) .wrapper{
transition-delay: .6s;
}
#box ul li:nth-child(4) .wrapper{
transition-delay: .1s;
}
#box ul li:nth-child(5) .wrapper{
transition-delay: .2s;
}
#box ul li:nth-child(6) .wrapper{
transition-delay: .5s;
}
#box ul li h2{
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
width: 90px;
text-align: center;
margin-top: -8px;
margin-left: -45px;
}
#box ul li:hover .bg{
opacity: 1;
transition: 1s ease-in-out;
}
#box ul li:hover h2{
font-size:25px ;
}
#box ul li .bg{
height: 100%;
border-radius: 10px;
background-size: cover;
background-position: center;
opacity: .6;
}
#box ul li:nth-child(1) .wrapper .bg{
background-image: url(../img/1.jpg);
}
#box ul li:nth-child(2) .wrapper .bg{
background-image: url(../img/2.jpg);
}
#box ul li:nth-child(3) .wrapper .bg{
background-image: url(../img/3.jpg);
}
#box ul li:nth-child(4) .wrapper .bg{
background-image: url(../img/4.jpg);
}
#box ul li:nth-child(5) .wrapper .bg{
background-image: url(../img/5.jpg);
}
#box ul li:nth-child(6) .wrapper .bg{
background-image: url(../img/6.jpg);
}
#activeWrapper li:not(.active){
width: 0px;
height: 0px;
/* transition: .8s ease-in-out;*/
transition:width 1s ease-in-out,height .8s linear;
}
#activeWrapper li.active{
width: 100%;
height: 100%;
transition:1s ease-in-out;
transition-delay: .6s;
}
#activeWrapper li.active .bg{
width: 80vw;
height: 80vh;
background-size: 80vw 80vh;
transition:1s ease-in-out;
transition-delay: .6s;
}
#activeWrapper li.active .detaction{
width: 100%;
position: absolute;
top: 10px;
color: darkturquoise;
font-size: 25px;
display: flex;
justify-content: space-between;
}
#activeWrapper li.active h2{
opacity: 0;
}
#activeWrapper li.active .detaction .close{
cursor: pointer;
margin-right: 10px;
margin-top: -10px;
}
4.原生js文件
var divArr = document.getElementsByClassName('wrapper');
var ul = document.getElementsByTagName('ul')[0];
var lis = document.getElementsByTagName('li');
var close = document.getElementsByClassName('close');
var index = 0;
var timer = setTimeout(function() {
for(var i = 0; i < divArr.length; i++) {
divArr[i].classList.remove('deley');
}
}, 300);
for(var i = 0; i < lis.length; i++) {
(function(j) {
lis[j].onclick = function() {
ul.setAttribute('id', 'activeWrapper');
this.className = 'active';
}
close[j].onclick = function(e) {
lis[j].className = "";
ul.removeAttribute('id');
e.cancelBubble = true;//阻止事件冒泡
}
}(i))
}
5.以上就是全部代码，直接拷贝运行就可以，不足之处，欢迎指正。如有不明白的地方，欢迎评论。