用CSS3制作照片墙

最新推荐文章于 2021-12-13 21:59:31 发布
最新推荐文章于 2021-12-13 21:59:31 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37875876/article/details/80156805
版权

1.相关知识点：

Chrome 和 Safari 需要前缀 -webkit-；

Internet Explorer 9 需要前缀 -ms-：

Firefox需要前缀-moz-

  • box-shadow:

        功能：给元素的边框添加阴影效果

        语法：box-shadow:x轴偏移量  y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式

  • transform:

        功能：使元素变形的属性，配合rotate（旋转角度）、scale（缩放倍数）、skew(扭曲元素）等参数一起使用

        语法：transform：rotate

                transform: scale

  • transition：

        功能：设置元素由样式1转变成样式2的过程所需的时间

        语法：transition: property duration timing-function delay;

2.html代码：

		<div class="container">
			<img class="pt1" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt2" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt3" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt4"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt5"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt6"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt7"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			
		</div>

3.css代码：

		<style type="text/css">
			.container{
				background: #DEB887;
				width: 1000px;height: 600px;
				margin: 0px auto;
				position: relative;
			}
			img{
				background: #FFFFFF; 
				border: 5px solid #DCDCDC;				
				position: absolute;
				-webkit-transition: 1s;
				-moz-transition: 1s;
				transition: 1s;
			}
			img:hover{
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				transform: rotate(0deg);
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				transform: scale(1.2);
				z-index: 99;
				box-shadow: 5px 5px 15px gray;
			}
			.pt1{
				top: 50px; left: 100px;			
				-webkit-transform: rotate(20deg);
				-moz-transform: rotate(20deg);
				transform: rotate(20deg);				
			}
			.pt2{
				top: 300px; left: 50px;			
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(30deg);				
			}
			.pt3{
				top: 50px; left: 500px;			
				-webkit-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				transform: rotate(15deg);				
			}
			
			.pt4{
				top: 300px; left: 200px;			
				-webkit-transform: rotate(10deg);
				-moz-transform: rotate(10deg);
				transform: rotate(10deg);				
			}
			.pt5{
				top: 300px; left: 400px;			
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				transform: rotate(45deg);				
			}
			.pt6{
				top: 250px; left: 600px;			
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(30deg);				
			}										
			.pt7{
				top: 150px; left: 300px;			
				-webkit-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				transform: rotate(15deg);				
			}										
		</style>

整体代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3照片墙</title>
		<style type="text/css">
			.container{
				background: #DEB887;
				width: 1000px;height: 600px;
				margin: 0px auto;
				position: relative;
			}
			img{
				background: #FFFFFF; 
				border: 5px solid #DCDCDC;				
				position: absolute;
				-webkit-transition: 1s;
				-moz-transition: 1s;
				transition: 1s;
			}
			img:hover{
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				transform: rotate(0deg);
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				transform: scale(1.2);
				z-index: 99;
				box-shadow: 5px 5px 15px gray;
			}
			.pt1{
				top: 50px; left: 100px;			
				-webkit-transform: rotate(20deg);
				-moz-transform: rotate(20deg);
				transform: rotate(20deg);				
			}
			.pt2{
				top: 300px; left: 50px;			
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(30deg);				
			}
			.pt3{
				top: 50px; left: 500px;			
				-webkit-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				transform: rotate(15deg);				
			}
			
			.pt4{
				top: 300px; left: 200px;			
				-webkit-transform: rotate(10deg);
				-moz-transform: rotate(10deg);
				transform: rotate(10deg);				
			}
			.pt5{
				top: 300px; left: 400px;			
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				transform: rotate(45deg);				
			}
			.pt6{
				top: 250px; left: 600px;			
				-webkit-transform: rotate(30deg);
				-moz-transform: rotate(30deg);
				transform: rotate(30deg);				
			}										
			.pt7{
				top: 150px; left: 300px;			
				-webkit-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				transform: rotate(15deg);				
			}										
		</style>
	</head>
	<body>
		<div class="container">
			<img class="pt1" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt2" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt3" src="img/011.jpg" / width="300px" height="200px">
			<img class="pt4"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt5"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt6"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			<img class="pt7"  src="img/卡通高清壁纸-008.jpg" / width="300px" height="200px">
			
		</div>
	</body>
</html>

4.效果图：


只想安静的敲代码
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 3 transform制作漂亮的照片墙
weixin_72303943的博客
07-21 737
CSS 3 transform制作漂亮的照片墙
16个实用的CSS样式之3D照片墙
Web_boom的博客
09-23 1519
到此为止一个简单的3D照片墙就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得哈。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
2021微信上墙大屏活动扫码签到源码v3一键部署可用
12-16
傻瓜操作一键部署，最新版
CSS--实现照片墙
qq_53441451的博客
12-21 3543
<h1>CSS 照片墙</h1> <div class="box"> <img src="1.jpg" alt="" class="img1"> <img src="2.jpg" alt="" class="img2"> <img src="3.jpg" alt="" class="img3"> <img src="4.jpg" alt="" class="img4"> <img
html+CSS制作照片墙
04-19
NULL 博文链接：https://zlbcdn.iteye.com/blog/1866271
CSS3照片墙制作
MEMO的博客
09-24 707
​ CSS3照片墙的制作： 1、照片墙制作需求分析 每张照片的起始位置不一样每张照片有一定的旋转角度照片阴影及缓慢旋转、缓慢放大 2、css3特效属性 box-shadow: 功能：给元素的边框添加阴影效果 语法：box-shadow:x轴变量 Y轴变量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] position: 功能：给元素定位，主要用到绝对定位 用法：pos
CSS3制作精致的照片墙特效
09-27
主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3制作漂亮的照片墙的实现代码
09-24
下面小编就为大家带来一篇CSS3制作漂亮的照片墙的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3 transform制作漂亮的照片墙特效
12-13
总结起来，"CSS3 transform制作漂亮的照片墙特效"是一个运用了CSS3的`transform`属性来创建动态照片展示的项目，结合了旋转、缩放和平移等多种变换，通过CSS3的其他特性如`transition`增加交互性，为用户提供一个...
CSS3悬挂的照片墙效果代码
04-06
CSS3悬挂的照片墙效果代码是一款基于CSS3 transform 属性制作悬挂的照片墙效果代码。
css3实现照片墙
11-21
慢慢的靠近css3，制作一个简单的照片展示效果。
html+css自制照片墙案例
02-26
html+css自制照片墙案例 web前端页面制作入门级案例
css实现照片墙
Edward_Potato的博客
09-21 806
@charset “utf-8”; /全局控制/ *{ margin:0px; padding:0px; }/天空灰色/ body{ background-color:#eeeeee; } .container{width:960px; height:450px; margin:60px auto; position:relative;/*父容器设置
用纯CSS实现照片墙
bboyjoe的博客
06-25 2498
首先需要引入指定的照片，编写html代码 照片墙 然后再引入CSS代码 *{ margin:0; padding: 0; } body{ background-color: #eee; } .container{ widt
多彩照片墙（案例）
美奇软件开发工作室
03-11 4803
  &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;多彩照片墙&lt;/title&gt;&lt;style  type="text/css"&gt;div{width:1360px; margin:0 auto; position:r
用图片制作出一个照片墙
ducaijia_123的博客
10-28 795
1.首先你需要一张照片。暂且咱们成为a图 2.在文件->自动->联系表，然后打开它这里选择你需要设置照片墙的那些图片，然后宽度和高度设置成那张a图的宽高即可。然后点击确定。然后他就会创建一个联系表。 3.再点开那个a图，点击这个按钮->图案，选择这个联系表1，也可以给他进行一定的缩放达到你想要的效果即可 4.然后把这个图层设置成柔光模式，调整一下不透明度。 照片墙就制作好了 ...
CSS照片墙
liugaoyuans的博客
12-13 424
直接ctrl+c用 我是在哔哩哔哩看一个作者现场直接盲敲的，我就没有那么厉害了，看了好几遍，才敲完了 html代码 <body> <div class="main"> <div class="images"> <div style="--img:1"><img src="./img/ (1).jpg" alt=""></div> <div style.
纯CSS实现照片墙效果
超浓芝士味玉米片的博客
05-27 4310
纯CSS实现的照片墙效果，鼠标经过图片是图片上浮变大，照片程不同角度倾斜如图： HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一起度过的第一个生日</title> <link t...
css实现绚丽照片墙
zag666的博客
08-26 716
实现结果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css照片墙</title> <style type="text/css"> body{ background: linear-gradi...
利用动画制作照片墙
最新发布
06-01
制作照片墙的动画，可以使用CSS3的transition属性和transform属性来实现。下面是一个简单的示例代码： HTML部分 ``` <div class="photo-wall"> <div class="photo"> <img src="photo1.jpg" alt="照片1"> </div> <div class="photo"> <img src="photo2.jpg" alt="照片2"> </div> <div class="photo"> <img src="photo3.jpg" alt="照片3"> </div> </div> ``` CSS部分 ``` .photo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 500px; } .photo { width: 200px; height: 200px; margin: 10px; overflow: hidden; transition: transform 0.5s ease-in-out; } .photo:hover { transform: scale(1.2); } ``` 在这个示例中，我们使用了flex布局来让图片水平居中，然后对每个照片设置了一个宽度、高度和边距，并使用overflow属性来隐藏超出框架的部分。当鼠标悬停在照片上时，使用了transform属性来缩放照片，实现了简单的动画效果。 当然，这只是一个简单的示例，你可以根据自己的需求进行更多的CSS3动画设置，如旋转、淡入淡出等等。希望这个示例能够对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值