七夕节表白3d相册制作

最新推荐文章于 2022-10-17 22:43:39 发布

Jonny Jiang-zh

最新推荐文章于 2022-10-17 22:43:39 发布

阅读量985

点赞数 4

分类专栏： web前端文章标签： css3 html css animation 定位

本文链接：https://blog.csdn.net/weixin_45571140/article/details/108180956

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

七夕节表白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>

其中代码还存在一些优化，读者自行优化。
祝读者们早日脱单！！！

Jonny Jiang-zh

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
七夕节表白3d相册制作

七夕节表白3d相册制作涉及知识点定位阴影3d转换动画主要思路：通过定位将所有照片叠在一起，在设置默认的样式以及照片的布局，最后通过设置盒子以及照片的旋转动画来达到效果。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>3d相册</title> <style type="text/css"> /* 使用单位
复制链接

扫一扫