缩放图片展示特效
首先看一下这个特效的最终效果：
首先来分析一下这个效果都有哪些功能
- 首先初始化效果为6列，分别展示了图片的一部分
- 进入页面或者刷新页面时，每一列出现有一定时间间隔，有错落感
- 鼠标移入每一列时，每一列会有变化
- 鼠标点击每一列时，会展开当前图片，其余图片隐藏掉，同时图片出现一个title 和一个 close按钮
- 关闭每一列时会收紧当前图片，并还原到初始化状态
首先乍一看好像很复杂的样子，但是这个特效真的用了 99%的css3属性，仅仅是在打开关闭和类名切换的时候用到了一点点js。
那么怎么来实现呢？
第一步：做一个初始化页面
主要思路就是一个ul 里面有6个li
当然了，这里我还在外面包裹了一个大盒子，现在附上每一个li的代码
<li class="item ">
<div class="pic_area">
<div class="pic"></div>
<div class="title"><h2>Mellifluous</h2></div>
<div class="txt">
<div class="header">cloud1</div>
<div class="close"></div>
</div>
</div>
</li>
说一下每一个类名的含义：
- pic-area是我们最终放图片的地方，因为看最终成型效果的时候可以发现，在刷新的时候，会有一个灰色的背景，所以要新开辟一个图片区，来实现这个效果。
接下来我们给容器设定宽高，并使他们横排排列，
.wrapper .container{
width: 800px;
height: 600px;
display: flex;
justify-content: space-between;
align-items: center;
/* 使用弹性盒子布局，给每一列确定位置*/
}
.item{
width: 16%;
height: 100%;
border-radius: 25px;
/* 设置圆角，每一列的宽度为总的16%*/
overflow: hidden;
background-color: #424242;
}
差不多就是这样一个效果然后给每一个加入背景图片，（在pic里设置）背景图片position 为center size 为cover，然后中间的title依靠绝对定位，同时给他的父级pic-area 设置相对定位，通过平移实现居中，还有一些位置大小上的小细节，大家慢慢调整就好
注意在设置圆角时，一定要设置overflow：hidden，因为我们用的是背景图，虽然边框变成了圆角，但是盒子本身还是方的
.item .pic_area{
height: 100%;
width: 100%;
transition: transform 0.5s;
position: relative;
}
.item .pic{
background-size: cover;
background-position: center;
opacity: 0.6;
}
.item:nth-of-type(1) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq1.jpg);
}
.item:nth-of-type(2) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq2.jpg);
}
.item:nth-of-type(3) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq3.jpg);
}
.item:nth-of-type(4) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq4.jpg);
}
.item:nth-of-type(5) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq5.jpg);
}
.item:nth-of-type(6) .pic{
width: 100%;
height: 100%;
background-image: url(../img/tq6.jpg);
}
.item .title{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateY(-50%);
transform: translateX(-50%);
font-size: 12px;
transition: 0.5s opacity linear 1s;
}
在上述代码中，同时也设置了每一列的初始透明度：opacity：0.7
接下来增加鼠标移入的效果：
通过过渡属性使得动画看起来更加的自然，通过 linear 让变化是匀速的
.title h2{
transition: font-size 0.3s linear;
}
.item:hover h2{
font-size: 22px;
}
.item:hover .pic{
opacity: 1;
transition: opacity 0.3s linear;
}
至此整个效果已经初具规模
第二步：页面进入特效，与错落感的实现
这里我们会用到一点点js来控制它的类名
.init .item .pic_area{
transform: translate3d(0 ,100%,0);
}
这里 init是我一开始就加入到ul上的类名，也就是说当我的ul有init时，要沿着y轴平移他自己的100% 这里虽然只是在一个坐标轴上平移，但是我还是启动了3d，因为有了3d之后会使用GPU加速，这样动画会更加的丝滑~
接下来我们通过js来控制这个类名：
var timer = setTimeout(function(){
$('.container').removeClass('init');
},300)
因为这个效果只需要执行一次，所以使用了timeout延时器来做，进入页面300毫秒后移除init类名
这里用了jQuery语法，用原生js做一样的道理
然后我们得到的效果应该是六列同时移动
那么接下来：
.item:nth-of-type(2) .pic_area{
transition-delay: 0.1s;
}
.item:nth-of-type(3) .pic_area{
transition-delay: 0.2s;
}
.item:nth-of-type(4) .pic_area{
transition-delay: 0.3s;
}
.item:nth-of-type(5) .pic_area{
transition-delay: 0.4s;
}
.item:nth-of-type(6) .pic_area{
transition-delay: 0.5s;
}
通过css3增加延时，就可以实现错落感
第三步：打开效果
仔细观察完成图，我们发现点击之后，选中的列先不动，其余的高度先缩小，然后宽度后缩小，然后我们选中的列宽度变大
同样也是通过类名来控制样式
.active{
width: 100%;
/* 这个类名要加在item上 */
}
.container-active .item:not(.active){
height: 0%;
width: 0%;
/* container-active这个类名要加在container */
}
not是没有某个类名的样式，也就是说 ，当item有了active类名时，宽度变为100%，没有active的类名宽高都变为0%，但是这样做有个缺点，就是一开始我们就是什么都看不到了，因为一开始所有的item都没有active，active是靠js加上的，所有给他的父级加了一个 container-active类名，他的父级有这个类名时，子元素item才会启动这个效果，相当于一个开关的作用，这样在正常情况下，所有的item不会都消失不见
以下为jq代码，原生js道理相同：
$('.item').click(function () { // 给每一个item注册一个点击事件，实现打开列的效果
$(this).addClass('active');
$('.container').addClass('container-active');
});
紧接着继续观察完成图，宽高变化是由顺序的
.container-active .item{
transition: height 0.5s linear,width 0.5s linear 0.5s;
/* 过渡属性 高先变 0.5s完成匀速，宽后变0.5s完成匀速 有0.5s的延迟
*/
}
打开之后，中间的title要消失，因为打开之后，父级有类名，所以这是有类名时的情况就好，有类名是透明度opacity为 0
.container-active .title{
opacity: 0;
transition: 0.2s opacity linear;
}
第四步：关闭效果
首先关闭按钮不是一个X字母，或者其他图片或者icon，是用css画出来的
这里选中close区域，通过::after ::before 生成两个小盒子，长长的细细的，定位在它身上，一个顺时针旋转45度，另一个逆时针旋转45度
.item .txt .close::after{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(45deg);
}
.item .txt .close::before{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(-45deg);
}
然后我们的txt部分，也就是打开之后，最上面的部分，在打开之前是隐藏起来的，然后还有位置，等一些样式需要设置
.item .txt{
position: absolute;
width: 100%;
height: 30px;
left: 0px;
top: 30px;
transition: opacity 0.5s linear;
opacity: 0;
}
.item .txt .header{
float: left;
margin-left: 30px;
line-height: 30px;
}
.item .txt .close{
float: right;
margin-right: 30px;
cursor: pointer;
}
.active .txt{
opacity: 1;
transition: opacity 0.5s linear 1s;
/* 这个写在active类下 是为了实现打开后出现的效果*/
}
.item .txt .close{
width: 25px;
height: 25px;
}
.item .txt .close::after{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(45deg);
}
.item .txt .close::before{
content: "";
height: 2px;
width: 25px;
background-color: #fff;
position: absolute;
top:15px;
right: 25px;
transform: rotateZ(-45deg);
}
然后给close注册一个点击事件
$('.close').click(function (e) {
e.stopPropagation();
$('.container').removeClass('container-active');
$('.item').removeClass('active');
});
点击close的同时，移除container-active 类名 和active 类名
注意，这里因为会发生冒泡的缘故，所以会导致类名重复添加，刚刚删除之后会立马有重新加上，会导致，关闭不了的效果
一定要记得 使用： **e.stopPropagation();**阻止冒泡
//封装兼容冒泡的函数
function stopBobble(event){
if( event.stopPropagation()){
return event.stopPropagation();
}else{
return event.cancelBobble = true ;
}
}
其实这里如果使用原生js来阻止冒泡的话，大可不必在使用兼容语法了，因为前面都用的都是css3的新属性，ie是兼容不了的，更别说冒泡了，写一下就当回忆一下。
然后还有一个小细节要注意的是，关闭的时候，是和打开的动画是相反的
所以要给item加上这样一行代码
.item{
width: 16%;
height: 100%;
border-radius: 25px;
overflow: hidden;
background-color: #424242;
transition: width 0.5s linear ,height 0.5s linear 0.5s;
/* 这里和上面刚好相反 先宽后高*/
}
最后这个项目就结束啦！
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
