利用css3实现照片列表展开小demo
效果如下:
其实实现起来很简单，就是控制 宽 高的变化，然后给他加上transition 过度而已。觉得代码没什么难的地方，就不打注释了，如果哪里有不懂的话，可以直接评论呢。
直接上源码
html代码：
<!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="./css/index.css">
</head> <body>
<div class="wra">
<ul class="content">
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
<li class="items">
<div class="inner">
<h2>bird</h2>
<div class="bg">
<div class="close"></div>
</div>
</div>
</li>
</ul>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>
</body> </html>
css代码：
*{
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
:root,body,.wra{
width: 100%;
height: 100%;
}
.wra{
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
.wra .content{
width: 80%;
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.wra .content .items{
position: relative;
height: 100%;
width: 16%;
border-radius: 30px;
transition: height .5s linear, width .7s .5s linear;
}
.wra .content .items:hover .inner .bg{
opacity: 1;
}
.wra .content .items:hover h2{
font-size: 30px;
}
.wra .content .items h2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
z-index: 1;
transition: font-size .3s , opacity .3s;
}
.wra.wra-active .content .items h2{
opacity: 0;
}
.wra .content .items .inner{
width: 100%;
height: 100%;
transition: transform .5s ;
}
.wra .content .items .inner .bg{
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
border-radius: 30px;
opacity: .5;
transition: opacity .3s;
}
.wra .content .items:nth-of-type(1) .inner .bg{
background-image: url('../img/1.jpg');
}
.wra .content .items:nth-of-type(2) .inner .bg{
background-image: url('../img/2.jpg');
}
.wra .content .items:nth-of-type(3) .inner .bg{
background-image: url('../img/3.jpg');
}
.wra .content .items:nth-of-type(4) .inner .bg{
background-image: url('../img/4.jpg');
}
.wra .content .items:nth-of-type(5) .inner .bg{
background-image: url('../img/5.jpg');
}
.wra .content .items:nth-of-type(6) .inner .bg{
background-image: url('../img/6.jpg');
}
.wra .content .items.active{
width: 100%;
}
.wra .content .items.active .inner .bg{
opacity: 1;
}
.wra.wra-active .content .items:not(.active){
width: 0%;
height: 0%;
}
.wra .content .items .inner{
transform: translateY(101%);
}
.wra.init .content .items .inner{
transform: translateY(0%);
}
.wra.init .content .items:nth-of-type(2) .inner{
transition-delay: .2s;
}
.wra.init .content .items:nth-of-type(3) .inner{
transition-delay: .3s;
}
.wra.init .content .items:nth-of-type(4) .inner{
transition-delay: .4s;
}
.wra.init .content .items:nth-of-type(5) .inner{
transition-delay: .5s;
}
.wra.init .content .items:nth-of-type(6) .inner{
transition-delay: .6s;
}
.wra .content .items .inner .bg .close{
opacity: 0;
transform: rotateZ(0deg);
}
.wra .content .items.active .inner .bg .close{
position: absolute;
right: 30px;
top: 30px;
width: 30px;
height: 30px;
opacity: 1;
transform: rotateZ(360deg);
}
.wra .content .items.active .inner .bg .close{
transition: opacity .3s linear 1s, transform .5s linear 1s;
}
.wra .content .items.active .inner .bg .close::after,.wra .content .items.active .inner .bg .close::before{
position: absolute;
content: "";
width: 30px;
height: 4px;
background-color: #fff;
top: calc(50% - 2px);
}
.wra .content .items.active .inner .bg .close::after{
transform: rotateZ(45deg);
}
.wra .content .items.active .inner .bg .close::before{
transform: rotateZ(-45deg);
}
jquery代码：
setTimeout(function(){
$('.wra').addClass('init');
},400)
$('.items').on('click', function(){
$(this).addClass('active');
$('.wra').addClass('wra-active');
})
$('.close').on('click', function(e){
e.stopPropagation();
$('.items').removeClass('active');
$('.wra').removeClass('wra-active');
})
利用css3实现照片列表展开小demo的更多相关文章
- Android学习小Demo（19）利用Loader来实时接收短信
之前写过一篇文章<Android学习小Demo(13)Android中关于ContentObserver的使用>,在里面利用ContentOberver去监測短信URI内容的变化.我们先来 ...
- [置顶] 利用CXF发布webService的小demo
其实webService的发布不仅仅只有xfire,今天,给大家介绍一下用CXF发布一个webService的小demo,CXF也是我做webService用的第一个框架... 先将相关的jar引进来 ...
- css3的一个小demo（箭头hover变化）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery/CSS3实现图片层叠展开特效
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...
- 超可爱 纯CSS3实现的小猪、小老鼠、小牛
原文:超可爱 纯CSS3实现的小猪.小老鼠.小牛 利用纯CSS3绘制一些人物.动物.风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...
随机推荐
- buuctf-misc [BJDCTF2020]认真你就输了
下载压缩包,打开发现有一个10.xls打开一乱码,发现不了头绪,但是发现了pk开头 那我们能不能将这个.xls改成.zip 说干就干,于是我们改成zip解压 打开xl,然后再打开 在chars中发现f ...
- F. Moving Points 解析(思維、離散化、BIT、前綴和)
Codeforce 1311 F. Moving Points 解析(思維.離散化.BIT.前綴和) 今天我們來看看CF1311F 題目連結 題目 略,請直接看原題. 前言 最近寫1900的題目更容易 ...
- java数据结构-10循环队列
一.概念: 循环队列就是将队列存储空间的最后一个位置绕到第一个位置,形成逻辑上的环状空间,供队列循环使用 二.代码实现: @SuppressWarnings("unchecked" ...
- Redis---08Redis集群（一）
一.什么是Redis集群 Redis 集群实现了对Redis的水平扩容,即启动N个redis节点,将整个数据库分布存储在这N个节点中,每个节点存储总数据的1/N. Redis 集群通过分区(parti ...
- 【总结】springmvc
一.springmvc 1.基本概念 springmvc属于三层架构(表现层,业务层,持久层)的表现层.mvc指model,view,controller.Model(模型) : 通常指的是数据模型 ...
- ValueError: Unknown label type: 'continuous'
说明:SVM训练的标签列必须为整型数值,不能为float.y = np.array(y, dtype=int)或y.astype('int')
- 计算机网络-DHCP协议抓包分析总结
前置问题:什么是(网络)协议? 网络协议为计算机网络中进行数据交换而建立的规则.标准或约定的集合. 而且: 一个网络协议至少包括三要素: 语法:用来规定信息格式;数据及控制信息的格式.编码及信号电平等 ...
- simulink产生周期矩形波和8421码
初次入门simulink,由于学习了数字逻辑,试图进行仿真,首先需要的就是8421码,但是没找到simulink里面相关模块,如果各位知道怎么弄可以评论告诉我分享分享哈哈 我用的是matlab2016 ...
- java实现KFC点餐系统
这篇文章主要为大家详细介绍了java实现KFC点餐系统,模拟肯德基快餐店的收银系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 同学们应该都去麦当劳或肯德基吃过快餐吧?请同学们参考肯德基官网的信 ...
- 释放至强平台 AI 加速潜能 汇医慧影打造全周期 AI 医学影像解决方案
基于英特尔架构实现软硬协同加速,显著提升新冠肺炎.乳腺癌等疾病的检测和筛查效率,并帮助医疗科研平台预防"维度灾难"问题 <PAGE 1 LEFT COLUMN: CUSTOM ...