用css3制作照片墙

2025-06-01 04:20:03

用css3制作简单的照片墙，也可以用作公司网站产品展示页面。
实现的效果为页面垂直居中，鼠标移上图片旋转为0度并放大1.1倍

操作方法

01

html代码部分
02

<body> <div class="pic"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/1.jpg"> </div> </body>
03

css部分
04

<style type="text/css"> .pic{ background:#ffc; margin:0 auto; width: 980px; height: 700px; position: absolute; /*绝对定位*/ top: 50%; left: 50%; transform:translate(-50%,-50%);/*移动 */ } .pic img{ width:160px; height: 260px; margin:20px; border:10px solid #fff; box-shadow: 0px 4px 3px #ccc; } .pic img:nth-of-type(1), .pic img:nth-of-type(5){ transform: rotate(5deg); } .pic img:nth-of-type(2), .pic img:nth-of-type(6){ transform:rotate(-3deg); } .pic img:nth-of-type(3), .pic img:nth-of-type(8){ transform:rotate(2deg); } .pic img:nth-of-type(4), .pic img:nth-of-type(7){ transform:rotate(-7deg); } .pic img:hover{ transform:rotate(0deg); transform: scale(1.1); } </style>
05

最终效果
06

1.垂直居中 position: absolute; /*绝对定位*/ top: 50%; left: 50%; transform:translate(-50%,-50%);/*移动 */
07

2.图片旋转 transform: rotate(5deg);
08

3.当鼠标移上去的时候，图片旋转并放大 .pic img:hover{ transform:rotate(0deg); transform: scale(1.1); }
09

4.边框阴影 border:10px solid #fff; box-shadow: 0px 4px 3px #ccc;

赞 (0)

怎么用Excel制作照片墙插入图片

Excel是我们常用的办公软件之一,功能强大,在excel中还可以制作照片墙,怎么操作呢,下面小编介绍一下.具体如下:1.点击打开[Excel]2. 打开后,点击菜单栏的[插入],选择[smartar ...
如何利用excel表格中的smartart制作照片墙效果

Excel表格中的smartart是一个非常有用的工具,今天就跟大家介绍一下如何利用excel表格中的smartart制作照片墙效果的具体操作步骤.1. 首先我们打开电脑上的Excel表格,进入主页面 ...
怎么利用PS软件快速制作照片墙

今天给大家介绍一下怎么利用PS软件快速制作照片墙的具体操作步骤.1. 首先我们需要将想要制作的多张图片放在一个新建的文件夹下.2. 然后打开电脑上的PS软件,进入主页面后,依次点击上方的文件---自动 ...
ae制作照片墙视频教程（ae如何制作照片墙动画）

今天给大家分享的如何用AE from粒子制作照片墙,制作片头动画,下面我们来简单分享一下!第一步,打开AE,新建合成,默认1920*1080,如图.第二步,新建一个固态层第三步,给固态层添加粒子动画, ...
CSS3制作各种形状图像

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框-吃豆人操作方法 01 制作圆形: 要使用CSS来制作 ...
手机qq照片墙制作

每天都会尽量登陆QQ,看看有什么好的新闻,好的发现,还有同学的好的事情,也看着每天都是一样的装扮,而且还是别人的装扮,看着是不是有种感觉如果可以自己去制作自己喜欢的照片墙那是多开心的事情.很多美丽的风 ...
手机QQ照片墙全屏一体制作详细教程

手机QQ照片墙全屏一体的原理就是用一张图片切分成九张,一张上传为背景图,另外八张分别上传到照片墙最后QQ名片上形成全屏一体,如下图所示. 往照片墙上传八张图片一般人都会,难就难在怎么把一张图片分成九块 ...
ppt怎么制作炫酷的照片墙效果?

利用powerpoint制作炫酷的照片墙效果,其实主要使用了表格和设置形状格式功能,现在就把制作的过程和截图分享给大家,希望本经验能够起到抛砖引玉的作用. 1.首先双击电脑桌面上的powerpoint ...
ppt怎么制作三维照片墙效果?

ppt中想要制作一个三维照片墙,该怎么制作呢?下面我们就来看看详细的教程. 1.首先启动ppt2010,执行插入-图片命令,选择一组图片进行插入,统一设置大小. 2.执行ctrl+a组合键进行全选,执 ...