七夕节表白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. Usvn迁移

    近期由于公司需要整理所有的服务器资源进行统一管理,因此需要迁移原usvn到新环境,但是在网上查找有关usvn的迁移信息没有结果,故整理自己的通过测试的迁移方案共享给大家 迁移列表 原服务器 软件 目标 ...

  2. amazeui 验证按钮扩展

    做一个发送验证码按钮,点击后要60秒之后才能再次点击,利用原有的amazeui样式做的一些扩展,当然主题功能的代码全都是自己写的,也可以脱离amazeUi 自己完成这个功能按钮 代码如下: <! ...

  3. Day03_破解Windows7系统密码&用户与组管理&服务器远程管理

    破解Windows系统密码 一.利用5次shift漏洞破解win7密码 1.1 漏洞 1.在未登录系统时,连续按5次shift键,弹出程序c:\windows\system32\sethc.exe 2 ...

  4. python基础day7_编码及小数据池

    数字概念,字符串----小数据池 数字的范围:-5---256 字符串: 1,不能有特殊字符 2,s*20还是同一个地址,s*21之后就是另外一个地址 i1 = 6 i2 = 6 print(id(i ...

  5. Python os.mknod() 方法

    概述 os.mknod() 方法用于创建一个指定文件名的文件系统节点(文件,设备特别文件或者命名pipe).高佣联盟 www.cgewang.com 语法 mknod()方法语法格式如下: os.mk ...

  6. PHP get_resource_type() 函数

    get_resource_type() 返回资源(resource)类型. 版本要求:PHP 4 >= 4.0.2, PHP 5, PHP 7高佣联盟 www.cgewang.com 语法 st ...

  7. PHP ftp_ssl_connect() 函数

    定义和用法 ftp_ssl_connect() 函数打开一个安全的 SSL-FTP 连接. 当连接打开,您就可以在服务器运行 FTP 函数. 语法 ftp_ssl_connect(host,port, ...

  8. luogu P3285 [SCOI2014]方伯伯的OJ splay 线段树

    LINK:方伯伯的OJ 一道稍有质量的线段树题目.不写LCT splay这辈子是不会单独写的 真的! 喜闻乐见的是 题目迷惑选手 \(op==1\) 查改用户在序列中的位置 题目压根没说位置啊 只有排 ...

  9. FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置

    安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...

  10. Mybais面试题（一）

    1.对于Hibernate和MyBatis的区别与利弊,谈谈你的看法   Hibernate与MyBatis的对比:   1.MyBatis非常简单易学,与Hibernate相对较复杂,门槛较高;   ...