用html做照片墙

最新推荐文章于 2024-05-15 12:09:52 发布
最新推荐文章于 2024-05-15 12:09:52 发布
阅读量3.8k 收藏 36
点赞数 1
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46591771/article/details/109188731
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="./css样式.css"/>
	</head>
	<body>
		<div id="container" style="margin-left: 250px;">
			<div class="sep">
				<h3>Zoom in&Zoom-out</h3>
				<div class="image-hover  img-Zoom-in">
					<img src="image/u=1067040304,3322721354&fm=26&gp=0.jpg" />
				</div>
				<div class="image-hover  img-Zoom-out">
					<img src="image/u=2408657106,2889540791&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep">
				<h3>Rotate right&Rotate left</h3>
				<div class="image-hover  img-rotate-right">
					<img src="image/u=295223582,2529638015&fm=26&gp=0.jpg" />
				</div>
				<div class="image-hover  img-rotate-left">
					<img src="image/untitled.png" />
				</div>
			</div>
			<div class="sep">
				<h3>skewt&origin</h3>
				<div class="image-hover  img-origin" style="margin-left:250px;">
					<img src="image/u=3734771065,44624964&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep">
				<h3>Square-elipes&elipes-square</h3>
				<div class="image-hover  img-square-elipes">
					<img src="./image/u=3734771065,44624964&fm=26&gp=0.jpg" />
				</div>
				<div class="image-hover  img-elipes-square">
					<img src="./image/u=1067040304,3322721354&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep" >
				<h3>rotate-scale&scale-rotate</h3>
				<div class="image-hover  img-rotate-scale" style="margin-left:250px;">
					<img src="./image/u=2408657106,2889540791&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep" >
				<h3>RotateX&RotateY&RotateZ</h3>
				<div class="image-hover  img-rotatex">
					<img src="image/u=295223582,2529638015&fm=26&gp=0.jpg" />
				</div>
				<div class="image-hover  img-rotatey">
					<img src="image/untitled.png" />
				</div>
				<div class="image-hover  img-rotatez" style="margin-left: 250px;">
					<img src="image/untitled.png" />
				</div>
			</div>
			<div class="sep">
				<h3>grayscale</h3>
				<div class="image-hover  img-grayscale" style="margin-left:250px;">
					<img src="image/u=3734771065,44624964&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep">
				<h3>blur</h3>
				<div class="image-hover  img-blur" style="margin-left:250px;">
					<img src="image/u=3734771065,44624964&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="sep">
				<h3>roll</h3>
				<div class="image-hover  img-roll" style="margin-left:250px;">
					<img class="img-1" src="image/u=3734771065,44624964&fm=26&gp=0.jpg"width="450px" height="300px"  />
					<img class="img-2" src="image/u=1067040304,3322721354&fm=26&gp=0.jpg" width="450px" height="300px" />
				</div>
			</div>
		</div>
	</body>
</html>

css代码部分

body{
	background-color: #DEB887;
}
#container{
	width: 900px;
	background-color: #B5B5B5;
	border: 1px solid black;
	padding: 50px;
}
.sep{
	width: 100%;
	border: 1px solid;
}
.image-hover{
	
	width: 350px;
	height: 200px;
	display: inline-block;
	border: 10px solid #FFFFCC;
	overflow: hidden;
	margin-left: 50px;
	margin-bottom: 30px;
	box-shadow: 10px 10px 5px gray;
	-webkit-box-shadow: 10px 10px 5px gray;
}
h3{
	text-align: center;
}
.image-hover img{
	margin: -80px 0px 0px -100px;
}
/***zoom in ***/
.img-Zoom-in img{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-Zoom-in:hover img{
	transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-webkit-transform: scale(0.8);
}
/***zoom 0ut ***/
.img-Zoom-out img{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-Zoom-out:hover img{
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
/***Rotate right ***/
.img-rotate-right img{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-rotate-right:hover img{
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
}

/***Rotate left ***/
.img-rotate-left img{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-rotate-left:hover img{
	transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
}

/***origin ***/
.img-origin{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-origin:hover {
	transform: skew(20deg);
	-moz-transform: skew(20deg);
	-ms-transform: skew(20deg);
	-webkit-transform: skew(20deg);
}
/***square-elipes ***/
.img-square-elipes{
	transform: all 2.2s ease-in-out;
	-webkit-transition: all 2.2s ease-in-out;
	-moz-transition: all 2.2s ease-in-out;
	-o-transition: all 2.2s ease-in-out;	
}
.img-square-elipes:hover{
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webbit-border-radius:50%;
	
}
/***elipes-square ***/
.img-elipes-square{
	
	transform: all 2.2s ease-in-out;
	-webkit-transition: all 2.2s ease-in-out;
	-moz-transition: all 2.2s ease-in-out;
	-o-transition: all 2.2s ease-in-out;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webbit-border-radius:50%;
}
.img-elipes-square:hover{
	border-radius: 0%;
	-moz-border-radius: 0%;
	-webbit-border-radius:0%;
}

/***rotate-scale ***/
.img-rotate-scale{
	transform: all 2.2s ease-in-out;
	-webkit-transition: all 2.2s ease-in-out;
	-moz-transition: all 2.2s ease-in-out;
	-o-transition: all 2.2s ease-in-out;	
}
.img-rotate-scale:hover{
	transform: rotate(720deg) scale(2.2);
	-webkit-transition: rotate(720deg) scale(2.2);
	-moz-transition: rotate(720deg) scale(2.2);
	-o-transition: rotate(720deg) scale(2.2);	
}

/***Rotate:X; ***/
.img-rotatex{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-rotatex:hover{
	transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
}

/***Rotate:Y; ***/
.img-rotatey{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-rotatey:hover{
	transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
/***Rotate:Z; ***/
.img-rotatez{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-rotatez:hover{
	transform: rotateZ(180deg);
	-moz-transform: rotateZ(180deg);
	-ms-transform: rotateZ(180deg);
	-webkit-transform: rotateZ(180deg);
}
/***grayscale; ***/
.img-grayscale{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-grayscale:hover{
	filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
/***blur; ***/
.img-blur{
	transform: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.img-blur:hover{
	filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-webkit-filter: blur(5px);
}
/***effect - image roll ***/
.img-roll{
	background: #000;
	position: relative;
}
.img-roll img{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	float: left;
}
.img-roll .img-1{
	left: 0px;
}
.img-roll .img-2{
	left: 130%;
}
.img-roll:hover .img-1{
	left: 130%;
}
.img-roll:hover .img-2{
	left: 0%;
}
.img-roll img{
	transform: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
}
.img-roll:hover img{
	transform: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
}

效果图
在这里插入图片描述

正在成长的程序猿111
关注
  • 1
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html实现照片墙
weixin_57223652的博客
04-13 441
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习&
html实现照片墙 html实现照片墙
02-22
总结一下，实现HTML照片墙的关键步骤包括：使用HTML插入图片，通过CSS进行布局，如使用Flexbox，以及可能使用JavaScript来增加交互性，如点击放大、动态加载等。在实际开发中，还需要考虑到响应式设计，确保照片墙在...
HTML实现3D照片旋转墙
weixin_1095的博客
03-04 611
【代码】HTML实现3D照片旋转墙。
照片墙_HTML5制作照片墙_
09-29
这是一个利用HTML5制作的照片墙，用于参考吗，希望对大家有用
【HTML 实现 —— 爱心照片墙】
最新发布
2401_84097678的博客
05-15 287
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
用HTML做一個酷炫的照片墻，效果非常酷炫。
weqireirtotor的博客
11-24 2760
這就是全部代碼，怎麽弄照片呢？新建文件夾，命名爲照片墻，再在裏面建一個文件夾命名爲img，在文件夾裏面下載好30張美照，命名爲1.jpg，2.jpg......
【源码+文档】基于HTML+CSS实现可交互照片墙
yuxibdd的博客
09-11 1156
根据需求，设计界面原型。
最火照片墙前端纯HTML（只需添加照片）
热门推荐
孙宇航的博客
05-19 1万+
最火照片墙
在html中制作多彩照片墙,照片墙不是乱贴的，教你1分钟打造高逼格照片墙！
weixin_29250573的博客
06-26 2369
照片墙Photo wall照片墙可不是随随便便出效果的，在设计照片墙的时候需要注意其尺寸大小，要讲究乱中求序。可以选择白色、黑色、木材框协调自己的照片。用一些黑白色系的木相框修饰下照片！让它们看起来不那么的单调！为了显示出照片墙的丰富性，也可以考虑在其中加入一些诸如宠物一类的它系照片进行组合！宫格式的摆放方式算是一种充满趣味的方式，视觉上看起来是那么的整洁明了！丰富多彩的排列顺序可以考虑放在孩子的...
HTML爱心照片墙.rar
01-15
7. **部署与运行**：下载者只需要解压文件，然后使用本地Web服务器（如Apache、Nginx或简单的HTTP服务器如http-server）运行HTML文件，即可在浏览器中查看爱心照片墙的效果。 通过研究和理解这些源代码和素材，初学...
3D圆环动态照片墙html文件
04-28
在本资源中，我们主要关注的是一个基于HTML的3D圆环动态照片墙实现，它提供了用户友好的交互体验，允许鼠标自由拖拽以查看3D照片墙的不同角度。这个热门项目是前端开发中的一个创新应用，展示了HTML、CSS以及可能的...
html+CSS制作照片墙
04-19
NULL 博文链接：https://zlbcdn.iteye.com/blog/1866271
照片墙实例（html+css）
03-13
很精美又简约的一个照片墙，用css写成。
html+css自制照片墙案例
02-26
html+css自制照片墙案例 web前端页面制作入门级案例
多彩照片墙素材
08-15
多照片墙
html+照片墙
04-25
通过HTML5+CSS3所设计的照片墙。。。有需要的请取。。
3D旋转照片墙html
12-26
【3D照片墙html】是一种利用HTML5、CSS3以及可能的JavaScript技术实现的交互式网页设计。这种设计能够创建一个立体的、可旋转的照片展示墙，用户可以通过鼠标操作从不同角度浏览照片，增强了用户体验和视觉效果。 ...
html + css 实现一个炫酷的照片墙
疯魔coding君的博客
12-18 9719
使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的效果，效果图如下： 以下直接附上源码，图片可自己随意设置，所有图片放在与源码 .html 文件同级的 img2 文件夹内： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙</title> <style> body {
在html中制作多彩照片墙,多彩墙面设计让你的家充满创意_丝路教程网
weixin_42410443的博客
06-26 350
黑发不知勤学早，白发方悔读书迟！ —— 颜真卿 开始学习你想有一个创意家居空间么，在整个家居设计中，墙面设计是可以随意发挥你的创意。相比较其他的空间功能类设计，墙面设计承载更多的是装饰性营造美感的作用。好的墙面设计能让我们感到视觉愉悦的同时也能让整个家看起来更加时尚创意，如果你也正在为如何设计墙面而发愁，不要怕，今天就和大家分享一篇好文。简单的色调能营造不简单的效果，就像经典黑白条纹的墙面配上白色...
用html做一个照片墙
06-12
好的，以下是一个简单的HTML照片墙的代码示例： ```html <!DOCTYPE html> <html> <head> <title>照片墙</title> <style> /* 设置图片样式 */ img { width: 200px; height: 200px; margin: 10px; border: 2px solid black; } </style> </head> <body> <!-- 第一行图片 --> <div> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div> <!-- 第二行图片 --> <div> <img src="img4.jpg"> <img src="img5.jpg"> <img src="img6.jpg"> </div> <!-- 第三行图片 --> <div> <img src="img7.jpg"> <img src="img8.jpg"> <img src="img9.jpg"> </div> </body> </html> ``` 在上面的代码中，我们使用了 `img` 标签来插入图片，并设置了一些样式来使图片之间有一定的间隔，边框和大小相同。我们使用 `div` 标签来创建每一行的图片，这些 `div` 标签会自动排列在页面上。你可以根据需要添加或删除行和图片来创建自己的照片墙。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值