使用css3制作照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/photo.css">
</head>
<body>
<div class="photo">
<div class="a">
<div class="a-one"><img class="p p1" src="data:images/1.gif"></div>
<div class="a-two"><img class="p p2" src="data:images/1.gif"></div>
<div class="a-three"><img class="p p3" src="data:images/1.gif"></div>
<div class="a-four"><img class="p p4" src="data:images/1.gif"></div>
</div>
<div class="b">
<div class="b-one"><img class="p p5" src="data:images/2.gif"></div>
<div class="b-two"><img class="p p6" src="data:images/2.gif"></div>
<div class="b-three"><img class="p p7" src="data:images/2.gif"></div>
<div class="b-four"><img class="p p8" src="data:images/2.gif"></div>
<div class="b-five"><img class="p p9" src="data:images/2.gif"></div>
<div class="b-six"><img class="p p10" src="data:images/2.gif"></div>
</div>
<div class="c">
<div class="c-one"><img class="p p11" src="data:images/3.gif"></div>
<div class="c-two"><img class="p p12" src="data:images/3.gif"></div>
<div class="c-three"><img class="p p13" src="data:images/10.gif"></div>
<div class="c-four"><img class="p p14" src="data:images/10.gif"></div>
<div class="c-five"><img class="p p15" src="data:images/10.gif"></div>
<div class="c-six"><img class="p p16" src="data:images/3.gif"></div>
<div class="c-seven"><img class="p p17" src="data:images/3.gif"></div>
</div>
<div class="d">
<div class="d-one"><img class="p p18" src="data:images/4.gif"></div>
<div class="d-two"><img class="p p19" src="data:images/4.gif"></div>
<div class="d-three"><img class="p p20" src="data:images/10.gif"></div>
<div class="d-four"><img class="p p21" src="data:images/10.gif"></div>
<div class="d-five"><img class="p p22" src="data:images/10.gif"></div>
<div class="d-six"><img class="p p23" src="data:images/4.gif"></div>
<div class="d-seven"><img class="p p24" src="data:images/4.gif"></div>
</div>
<div class="e">
<div class="e-one"><img class="p p25" src="data:images/5.gif"></div>
<div class="e-two"><img class="p p26" src="data:images/5.gif"></div>
<div class="e-three"><img class="p p27" src="data:images/10.gif"></div>
<div class="e-four"><img class="p p28" src="data:images/10.gif"></div>
<div class="e-five"><img class="p p29" src="data:images/10.gif"></div>
<div class="e-six"><img class="p p30" src="data:images/5.gif"></div>
<div class="e-seven"><img class="p p31" src="data:images/5.gif"></div>
</div>
<div class="f">
<div class="f-one"><img class="p p32" src="data:images/6.gif"></div>
<div class="f-two"><img class="p p33" src="data:images/6.gif"></div>
<div class="f-three"><img class="p p34" src="data:images/10.gif"></div>
<div class="f-four"><img class="p p35" src="data:images/10.gif"></div>
<div class="f-five"><img class="p p36" src="data:images/10.gif"></div>
<div class="f-six"><img class="p p37" src="data:images/6.gif"></div>
<div class="f-seven"><img class="p p38" src="data:images/6.gif"></div>
</div>
<div class="g">
<div class="g-one"><img class="p p39" src="data:images/7.gif"></div>
<div class="g-two"><img class="p p40" src="data:images/7.gif"></div>
<div class="g-three"><img class="p p41" src="data:images/10.gif"></div>
<div class="g-four"><img class="p p42" src="data:images/10.gif"></div>
<div class="g-five"><img class="p p43" src="data:images/10.gif"></div>
<div class="g-six"><img class="p p44" src="data:images/7.gif"></div>
<div class="g-seven"><img class="p p45" src="data:images/7.gif"></div>
</div>
<div class="h">
<div class="h-one"><img class="p p46" src="data:images/8.gif"></div>
<div class="h-two"><img class="p p47" src="data:images/8.gif"></div>
<div class="h-three"><img class="p p48" src="data:images/8.gif"></div>
<div class="h-four"><img class="p p49" src="data:images/8.gif"></div>
<div class="h-five"><img class="p p50" src="data:images/8.gif"></div>
<div class="h-six"><img class="p p51" src="data:images/8.gif"></div>
</div>
<div class="i">
<div class="i-one"><img class="p p52" src="data:images/9.gif"></div>
<div class="i-two"><img class="p p53" src="data:images/9.gif"></div>
<div class="i-three"><img class="p p54" src="data:images/9.gif"></div>
<div class="i-four"><img class="p p55" src="data:images/9.gif"></div>
</div>
</div>
</body>
</html>
css属性
*{
margin: 0;
padding: 0;
margin: 0 auto;
}
.photo{
width: 800px;
height: 1000px;
position: relative;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;/*图片白色背景*/
/*背景*/
/*左移，下移，虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*图片阴影*/
width:50px; /*图片宽度*/
/*相对定位*/
}
.photo img:hover {
/*旋转角度变回0*/
transform:rotate(0deg) scale(1.5);
z-index:9;
}
.photo .a{
display: inline-block;
left: 50px;
}
.photo .a .a-one{
margin-top: 60px;
}
.photo .b{
display: inline-block;
position: absolute;
left: 90px;
}
.photo .c{
display: inline-block;
position: absolute;
left: 180px;
}
.photo .d{
display: inline-block;
position: absolute;
left: 270px;
}
.photo .d .d-one{
margin-top: 60px;
}
.photo .e{
display: inline-block;
position: absolute;
left: 360px;
}
.photo .e .e-one{
margin-top: 120px;
}
.photo .f{
display: inline-block;
position: absolute;
left:450px;
}
.photo .f .f-one{
margin-top: 60px;
}
.photo .g{
display: inline-block;
position: absolute;
left:540px;
}
.photo .g .g-one{
margin-top: 0px;
}
.photo .h{
display: inline-block;
position: absolute;
left:630px;
}
.photo .h .h-one{
margin-top: 0px;
}
.photo .i{
display: inline-block;
position: absolute;
left:720px;
}
.photo .i .i-one{
margin-top: 60px;
}
转载于:https://www.cnblogs.com/zy66blogs/p/7507875.html
使用css3制作照片墙相关推荐
- php照片墙,用CSS3制作照片墙的特效
这篇文章主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享利用CSS3动画制作照片墙的详细步骤,供大家参考,具体内容如下 第一 ...
- 用CSS3制作照片墙
1.相关知识点: Chrome 和 Safari 需要前缀 -webkit-: Internet Explorer 9 需要前缀 -ms-: Firefox需要前缀-moz- box-shadow: ...
- 利用CSS3动画效果制作照片墙
[效果] 纯CSS3制作动态照片墙 [原理] HTML页面中写一个盒子,盒子里面放10张图片.让这10张图片,随意摆放(给图片设置旋转角度和在盒子中的所处位置),再利用CSS3动画的技术,对这10张图 ...
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- 用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单 原文:用CSS3制作很特别的波浪形菜单 网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
- css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
- 一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
- html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
- 用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
最新文章
- 清华旷视让全连接层“内卷”，卷出MLP性能新高度
- 网站推广必备手册:SEO教程:搜索引擎优化入门与进阶(第2版)
- HTML悬浮音乐播放器源码 自带后台
- micropython logging文档
- sql 循环语句几种方式
- 文件上传利器SWFUpload入门简易教程(转)
- linux公社大量免费的在线android资料
- Python：50行代码实现下载小说，图片章节可自动识别转文字保存...
- 基于51单片机的智能窗口控制系统（protues仿真+程序+论文+PPT+PCB）
- 北京车管所 与 换领驾驶证过程
- js中常用的Math函数方法
- 回车符号和换行符号产生背景
- ICME2021：基于机器学习的VVC帧内编码码率控制
- 【Tableau 图表大全21】之箱型图(盒须图)
- python 日历壁纸_Excel+Python=精美DIY壁纸日历
- 群老大——区块链社群将成为主流的生产组织
- vue项目简单的后台管理系统
- umi中AssertionError [ERR_ASSERTION]: filePath not found of
- 中兴B860AV2.1-T(M)-高安版-当贝纯净桌面线刷固件包
- ubuntu 16.04 输入法候选框不显示的解决方法