七夕节表白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反爬学习

    网址:http://www.porters.vip/confusion/food.html 打开开发者工具后 页面源码并不是真实的数字,随便点一个d标签查看其样式 我们需要找到两个文件,food.cs ...

  2. SpringCloud Bus消息总线简介

    简介: SpringCloud Bus配合SpringCloud Config使用可以实现配置的动态刷新 SpringCloud Bus是用来将分布式系统的节点与轻量级消息系统链接起来的框架,它整合了 ...

  3. Django学习路28_ .html 文件继承及<block 标签>,include 'xxx.html'

    在 templates 文件夹下创建 基类 base.html <!DOCTYPE html> <html lang="en"> <head> ...

  4. PHP is_bool() 函数

    is_bool() 函数用于检测变量是否是布尔型.高佣联盟 www.cgewang.com PHP 版本要求:PHP 4, PHP 5, PHP 7 语法 bool is_bool ( mixed $ ...

  5. Skill 脚本演示 ycChangeViaNumber.il

    https://www.cnblogs.com/yeungchie/ ycChangeViaNumber.il 使用鼠标滚轮快速修改 Via 的数量. 回到目录

  6. MySQL InnoDB技术内幕：内存管理、事务和锁

    前面有多篇文章介绍过MySQL InnoDB的相关知识,今天我们要更深入一些,看看它们的内部原理和机制是如何实现的. 一.内存管理 我们知道,MySQl是一个存储系统,数据最后都写在磁盘上.我们以前也 ...

  7. 笨办法学python3练习代码ex19.py

    定义函数的语法: def  函数名(参数) (语句) #函数和变量 #函数里的变量与脚本里的变量是没有联系的. def cheese_and_crackers(cheese_count,boxes_o ...

  8. log4net用法实例

    内容转载自:https://www.cnblogs.com/youring2/archive/2011/04/27/2030424.html 1.引用log4net.dll 2.在AssemblyIn ...

  9. 企业玩转DevOps转型：由弱到强，只需7步

    [摘要] 在参考业界方法并总结客户成功故事的基础上,本文提出了“七步法”路线图,希望能帮助更多的企业顺利进行DevOps转型. 从2009年诞生,DevOps已经悄然走过了10多个年头.Gartner ...

  10. (转)Linux 下栈溢出问题分析解决 *** stack smashing detected *** XXXX terminated

    Linux 下栈溢出问题分析解决 *** stack smashing detected *** XXXX terminated 1.利用gdb 或者valgrind 定位到具体的代码 最近在Linu ...