七夕节表白3d相册制作

涉及知识点

  • 定位
  • 阴影
  • 3d转换
  • 动画

主要思路：

通过定位将所有照片叠在一起，在设置默认的样式以及照片的布局，最后通过设置盒子以及照片的旋转动画来达到效果。

代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>3d相册</title>

		<style type="text/css">

			/* 使用单位将所有照片叠在一起 */

			img{

				width: 200px;

				position: absolute;

				/* 照片加阴影 */

				box-shadow: 0 0 8px black;

				/* 照片圆角 */

				border-radius: 5px;

			}

			#album{

				width: 200px;

				height: 267px;

				margin: 250px auto;

				/* 父元素设置保留3d效果,这样子子元素的3d效果就可以显示出来 */

				transform-style: preserve-3d;

				/* 调用动画 */

				animation: xuanzhuan 20s linear infinite;

			}

			body{

				/* 设置视距,更好的观察3d效果 */

				perspective: 800px;

				background-image: url(image/bg2.jpg);

				overflow: hidden;

			}

			@keyframes xz{

				/* 设置每张照片独自的旋转效果动画 */

				0% {

					transform: rotateY(0deg);

				}

				100% {

					transform: rotateY(360deg);

				}

			}

			@keyframes xuanzhuan{

				/* 设置整个照片容器的旋转动画 */

				from{

					transform: rotateY(0deg);

				}

				to{

					transform: rotateY(360deg);

				}

			}

			#album div[class^="box"] {

				transform-style: preserve-3d;

			}

			#album div[class^="box"] img {

				animation: xz 20s linear infinite;

			}

			/* 设置每张图片的默认旋转样式以及布局 */

			#album .box1 {

				transform: rotateY(0deg) translateZ(200px);

			}

			#album .box2 {

				transform: rotateY(60deg) translateZ(200px);

			}

			#album .box3 {

				transform: rotateY(120deg) translateZ(200px);

			}#album .box4 {

				transform: rotateY(180deg) translateZ(200px);

			}

			#album .box5 {

				transform: rotateY(240deg) translateZ(200px);

			}

			#album .box6 {

				transform: rotateY(300deg) translateZ(200px);

	        }

		</style>

	</head>

	<body>

		<div id="album">

			<div class = "box1"><img src="image/1.jpg" ></div>

			<div class = "box2"><img src="image/2.jpg" ></div>

			<div class = "box3"><img src="image/3.jpg" ></div>

			<div class = "box4"><img src="image/4.jpg" ></div>

			<div class = "box5"><img src="image/5.jpg" ></div>

			<div class = "box6"><img src="image/6.jpg" ></div>

		</div>

	</body>

</html>

其中代码还存在一些优化，读者自行优化。

祝读者们早日脱单！！！

七夕节表白3d相册制作(html5+css3)的更多相关文章

  1. 15款HTML5/CSS3案例展示，导航，日历，钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  2. 程序员用HTML5给女朋友制作的3D相册

    程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...

  3. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

  4. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  5. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  8. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  9. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. python处理excel文件(xls和xlsx)

    一.xlrd和xlwt 使用之前需要先安装,windows上如果直接在cmd中运行python则需要先执行pip3 install xlrd和pip3 install xlwt,如果使用pycharm ...

  2. 设在起始地址为STRING的存储空间存放了一个字符串（该串已存放在内存中，无需输入，且串长不超过99），统计字符串中字符“A”的个数，并将结果显示在屏幕上。

    问题 设在起始地址为STRING的存储空间存放了一个字符串(该串已存放在内存中,无需输入,且串长不超过99),统计字符串中字符"A"的个数,并将结果显示在屏幕上. 代码 data ...

  3. 使用 MySQLi 和 PDO 向 MySQL 插入多条数据

    PHP MySQL 插入多条数据 使用 MySQLi 和 PDO 向 MySQL 插入多条数据 mysqli_multi_query() 函数可用来执行多条SQL语句. 以下实例向 "MyG ...

  4. Python os.fchdir() 方法

    概述 os.fchdir() 方法通过文件描述符改变当前工作目录.高佣联盟 www.cgewang.com Unix, Windows 上可用. 语法 fchdir()方法语法格式如下: os.fch ...

  5. PHP date_timestamp_get() 函数

    实例 返回今天的日期和时间的 Unix 时间戳: <?php$date=date_create();echo date_timestamp_get($date);?> 运行实例 » 定义和 ...

  6. PDO::lastInsertId

    PDO::lastInsertId — 返回最后插入行的ID或序列值(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 string PDO::lastIn ...

  7. 牛客挑战赛39 D 牛牛的数学题 NTT FMT FWT

    LINK:牛牛的数学题 题目看起来很不可做的样子. 但是 不难分析一下i,j之间的关系. 对于x=i|j且i&j==0, i,j一定是x的子集 我们可以暴力枚举子集来处理x这个数组. 考虑 x ...

  8. CF R 632 div2 1333D Challenges in school №41

    LINK:Challenges in school №41 考试的时候读错题了+代码UB了 所以wa到自闭 然后放弃治疗. 赛后发现UB的原因是 scanf读int类型的时候 宏定义里面是lld的类型 ...

  9. K近邻算法（一）

    K 近邻算法思想: 寻找该点周围最近的K个点.根据这K 个点的类别来判断该点的类别: 核心: 数据归一化.(在必要的时候必须进行数据归一化处理,防止某一特征在计算数据时占比较重) 计算欧拉距离 . 使 ...

  10. 网站favicon.ico 图标

    favicon.ico一般用于作为缩略的网站图标,它显示在浏览器的地址栏或者标签上.目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图标切成png图片. 2.把p ...