纯CSS实现照片墙效果
时间:2022-07-24
本文章向大家介绍纯CSS实现照片墙效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS实现照片墙</title>
<style>
/*
*纯CSS实现照片墙:
*公众号:AlbertYang
*/
/* RESET */
*{
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Helvetica, "5b8b4f53", "Arial", sans-serif;
font-size: 12px;
color: #eeeeee;
}
.container{
width: 90%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .img-wrap {
padding: 10px;
margin: 10px;
background: white;
border: 1px solid #ddd;
width: 160px;
height: fit-content;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
z-index: 1;
}
.container .img-wrap img {
width: 100%;
height: auto;
}
.container .img-wrap:after {
content: attr(data-title);
display: block;
text-align: center;
font-size: 15px;
color: #FCC688;
}
.container .img-wrap:nth-child(1n){
transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
}
.container .img-wrap:nth-child(2n){
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}
.container .img-wrap:nth-child(3n){
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.container .img-wrap:nth-child(4n){
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.container .img-wrap:nth-child(5n){
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.container .img-wrap:nth-child(6n){
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
.container .img-wrap:nth-child(7n){
transform:rotate(50deg);
-webkit-transform:rotate(50deg);
}
.container .img-wrap:nth-child(8n){
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.container .img-wrap:nth-child(9n){
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
}
.container .img-wrap:nth-child(10n){
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
}
.container .img-wrap:nth-child(11n){
transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
}
.container .img-wrap:hover {
box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
transform:rotate(0deg) scale(1.20);
-webkit-transform:rotate(0deg) scale(1.20);
z-index: 2;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
</div>
</body>
</html>
- Spring读书笔记——bean创建(下)
- 当区块链遇上传统行业 我们的生活和工作会改变吗?
- 如何设计开发好一个 HTTP API?
- [WCF权限控制]基于Windows用户组的授权方式[下篇]
- Spring读书笔记——bean解析
- 10个大数据误区,看看你中了几个?
- 从数据到代码——通过代码生成机制实现强类型编程[上篇]
- Spring读书笔记——bean加载
- Java8-初识Lambda
- 我的WCF之旅(5):面向服务架构(SOA)和面向对象编程(OOP)的结合——如何实现Service Contract的重载(Overloading)
- WCF技术剖析之三十:一个很有用的WCF调用编程技巧[下篇]
- 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持
- WCF技术剖析之二十九:换种不同的方式调用WCF服务[提供源代码下载]
- 我的WCF之旅(4):WCF中的序列化[下篇]
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Linux C 后台服务程序单进程控制的实现
- Linux下SSH免密码登录配置详解
- SSH端口转发实现内网穿透的实现
- 在linux中用同一个版本的R 同时安装 Seurat2 和 Seurat3的教程
- AUCell:在单细胞转录组中识别细胞对“基因集”的响应
- linux查看硬件配置命令的方法示例
- Ubuntu环境编译安装PHP和Nginx的方法
- Ubuntu环境源码编译安装xdebug的方法
- CNS图表复现07—原来这篇文章有两个单细胞表达矩阵
- CentOS 7.x 安装 ZSH 终端的配置方法
- centos7 安装mysql和mysqlclient遇到的坑总结
- iOS音视频接入- TRTC计费及套餐介绍
- Linux简介及最常用命令(简单易学,但能解决95%以上的问题)
- Linux一行命令处理批量文件详解
- Linux中jar包启动和jar包后台运行的实现方式