七夕节表白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. 页面上怎么使用svg

    svg标签直接在页面使用 不多说. 其他标签使用svg 除了直接使用svg标签,还有如下方法: <object data="your.svg" type="imag ...

  2. 以细胞为例　说一下dfs和bfs的思路

    今天发现很少写dfs．． dfs主要思想是递归 bfs主要靠队列 先说一下这个题我被阻了半个小时的地方: 1读数一定要注意scanf的吃回车 2注意数据类型为char,判断时是'0' dfs: #in ...

  3. 油田问题　bfs

    #include<iostream> #include<stdio.h> #include<stdlib.h> #include<time.h> #in ...

  4. Day01_SpringBoot

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...

  5. 不看会后悔系列之idea的使用小技巧

    虽然用idea已多达N年,但你对其所有的功能都了如指掌吗?了解如下小tips助你开发更通畅. 调试专题 (1)不用每次都重启debugdebug程序时,只修改了一点代码,怎么在不重启程序的前提下,看到 ...

  6. 牛客练习赛64 如果我让你查回文你还爱我吗 线段树 树状数组 manacher 计数 区间本质不同回文串个数

    LINK:如果我让你查回文你还爱我吗 了解到了这个模板题. 果然我不会写2333... 考试的时候想到了一个非常辣鸡的 线段树合并+莫队的做法 过不了不再赘述. 当然也想到了manacher不过不太会 ...

  7. luogu P1452 [USACO03FALL]Beauty Contest G /【模板】旋转卡壳

    LINK:旋转卡壳 如题 是一道模板题. 容易想到n^2暴力 当然也能随机化选点 (还真有人过了 考虑旋转卡壳 其实就是对于某个点来说找到其最远的点. 在找的过程中需要借助一下个点的帮助 利用当前点到 ...

  8. charles抓取HTTPS设置，详细踩坑版

    写这篇文章的背景就是,每次我在一台新电脑上用charles抓包时,总是因为各种原因无法抓到https请求,每个百度出来的回答又不是那么详细,需要通过几篇回答才能解决过程中的各种问题,所以把自己的安装经 ...

  9. OAuth2.0-3客户端授权放到数据库

    授权得客户端信息.授权码信息全都存在数据库 1.建表 官方给了个sql文件:https://github.com/spring-projects/spring-security-oauth/blob/ ...

  10. python6.2类的封装

    class Card(object): def __init__(self,num,pwd,ban): self.num=num#卡号 self.pwd=pwd#密码 self.__ban=ban#余 ...