七夕节表白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. Tomcat内部结构、工作原理、工作模式和运行模式

    TOMCAT的内部结构 Tomcat是一个基于组件的服务器,它的构成组件都是可配置的,其中最外层的是Catalina servlet容器,其他组件按照一定的格式要求配置在这个顶层容器中.Tomcat的 ...

  2. transaction already active

    这个问题是使用spring 事务管理时经常出现的错误,最开始时相当令我头疼,也不知道是哪里出现的问题.在网上找了一阵后,依然无解.意思就是说上一个事务处于激活状态中,不能开始新的数据库更新操作. // ...

  3. 自定义bind

    Function.prototype.mybind = function (context, ...args1) { // 判断是否为函数 if (typeof this !== 'function' ...

  4. Caused by: java.sql.SQLSyntaxErrorException: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'c.id'

    打开mysql客户端,输入 select @@global.sql_mode 再执行 set @@global.sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DA ...

  5. PHP 怎么安装

    您需要做什么? 为了开始使用 PHP,您可以: 找一个支持 PHP 和 MySQL 的 Web 主机 在您自己的 PC 机上安装 Web 服务器,然后安装 PHP 和 MySQL 使用支持 PHP 的 ...

  6. PHP curl_multi_setopt函数

    (PHP 5 >= 5.5.0) curl_multi_setopt — 设置一个批处理cURL传输选项. 说明 bool curl_multi_setopt ( resource $mh , ...

  7. 不使用spring-boot-starter-parent作为依赖parent

    背景环境 在某些情况下由于某些原因,我们的项目不能使用spring-boot-starter-parent作为<parent>依赖,一定要有自己的<parent>,但同时还希望 ...

  8. java进阶(2)--抽象类

    一.抽象类集刺虎: 1.概念 类与类之前有共同特征,将这些共同特征提取出来,行为抽象类   2.抽象类的数据类型: 引用数据类型   3.语法 [修饰符列表]abstract Class 类型{类体} ...

  9. LinuX操作系统基础------> 用户管理，grep搜索

    用户管理 用户组管理 字符管理和grep搜索 1.用户管理: LinuX是一个多用户,多任务的操作系统,可以让多个用户使用,这个账号可以帮助对用户进行追踪,必须在初始化的时候设置好自己的密码 1-1配 ...

  10. MySQL回表查询

    一.MySQL索引类型 1.普通索引:最基本的索引,没有任何限制 2.唯一索引(unique index):索引列的值必须唯一,但是允许为空 3.主键索引:特殊的唯一索引,但是不允许为空,一般在建表的 ...