请稍等...正在玩命加载中......

css动画案例-3D相册

html css
css动画
发布日期:   2021-04-04
更新日期:   2021-07-13
文章字数:   2.2k
阅读时长:   11 分
阅读次数:  

准备工作

本次项目我们使用开发工具为HBuilderX来进行

  1. 设置开发软件的主题为你自己合适的主题
  2. 设置快捷键为VS Code的快捷
  3. 本次项目需要准备素材图片

项目创建

使用HbuilderX 来创建项目，我们可以采取一种最简单的方式来创建项目

  1. 在电脑的桌面上面创建一个英文的文件夹，如bgg
  2. 将之前准备好的素材文件夹img剪切到bgg的文件夹里面
  3. 将bgg文件夹拖入到HBuilderX这个开发工具里面去

开始项目

  1. 在当前项目下面新建一个index.html的文件，这是一个网页文件，新的项目当中，代码如下

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

  2. 开始设置中间的盒子

    <body>
    <div class="box"></div>
</body>

    接下来设置样式

    /* .box相当于class="box" */
.box {
    width: 200px;
    height: 280px;
    /* 设置了一个2px的实线的白色边框 */
    border: 2px solid white;
    /* 固定定位，固定的定在浏览器的某一个地方 */
    position: fixed;
    /* calc是CSS属性当中计算的使用 */
    left: calc(50% - 100px);
    top: calc(50% - 140px);
}

    代码说明：

    1. .box相当于html标签中的class="box"
    2. border代表设置元素的边框,solid是实线
    3. position:fixed是固定定位，具体可能参照http://www.softeem.xin:8090/archives/%E5%AE%9A%E4%BD%8D#%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D
    4. calc代表CSS中的计算

  3. 开始设置里面的第1张图片

    <style>
	/* .box相当于class="box" */
    .box {
        width: 200px;
        height: 280px;
        /* 设置了一个2px的实线的白色边框 */
        border: 2px solid white;
        /* 固定定位，固定的定在浏览器的某一个地方 */
        position: fixed;
        /* calc是CSS属性当中计算的使用 */
        left: calc(50% - 100px);
        top: calc(50% - 140px);
        /* 把平面的盒子变成一个3D的盒子 */
        transform-style: preserve-3d;
    }

    .box>img {
        /* 把图片的宽度与高度设置成与外边的盒子相同 */
        width: 100%;
        height: 100%;
    }
    /* 选中class="box"下边的第1张图片 */
    .box>img:nth-child(1) {
        /* 我要让这一张图片沿着Y轴去旋转30度 ,并且在Z轴上面向前走300px*/
        transform: rotateY(30deg) translateZ(300px);
    }
</style>
<div class="box">
    <img src="img/2014.jpg" />
</div>

    在上面的代码里面，我们用到了CSS3当中的变换属性transform，这一块可以参考http://www.softeem.xin:8090/archives/%E5%8F%98%E6%8D%A2

    其中还用到了3D变换

  4. 按照第1张图片的思路，我们把剩下的11张图片也放进去

    当我们按照我们的思维进行代码完成，在里面添加了剩下的图片代码

    <div class="box">
    <img src="img/2014.jpg" />
    <img src="img/2015.jpg" />
    <img src="img/2016.jpg" />
    <img src="img/2017.jpg" />
    <img src="img/2018上.jpg" />
    <img src="img/w01.jpg" />
    <img src="img/w02.jpg" />
    <img src="img/w03.jpg" />
    <img src="img/w04.jpg" />
    <img src="img/w05.jpg" />
    <img src="img/w06.jpg" />
    <img src="img/w07.jpg" />
</div>

    我们发现一个问题，这个图片是从上向下在排列，并没有符合我们的要求，那么，我们怎么样让片都从于同一个位置开始呢？

    这个时候我们要让所有的图片都以box盒子的左上角为开始，这怎么办呢？

    针对于这一种，在前端布局里面，有一个思路叫子绝父相

    http://www.softeem.xin:8090/archives/%E5%AE%9A%E4%BD%8D#%E5%85%B3%E4%BA%8E%E5%AD%90%E7%BB%9D%E7%88%B6%E7%9B%B8

    子绝父相：当一个元素如果要以另一外元素为标准进行位置布局的时候，最好的办法就是在父级元素上面设置相对定位,而在所有的子级元素上面设置绝对定位，这样就实现了子绝父相的布局

CSS动画的应用

在CSS里面，如果要使用动画，必须经历下面两个阶段

graph LR
A[定义动画]-->B[调用动画]

动画的定义

@keyframes 动画名称 {
    from {
		/*动画开始*/
    }
    to {
		/*动画结束*/
    }
}

下面我们就使用语法定义了一个旋转360度的动画 

/* 在CSS里面，我们可以定义一个动画 */
@keyframes zhuan {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

动画的调用

在调用动画的时候，要使用CSS的属性去调用，这个属性就是animation

  1. animation-name动画的名称
  2. animation-duration动画的时间
  3. animation-iteration-count动画执行的次数
  4. animation-timing-function动画执行的时间函数（动画的效果）

目前我们使用的就是上面的四个

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标哥最帅</title>
		<style type="text/css">
			body {
				background-color: black;
			}

			.box {
				width: 200px;
				height: 280px;
				border: none;
				position: fixed;
				left: calc(50% - 100px);
				top: calc(50% - 140px);
				transform-style: preserve-3d;
				transform: rotateX(-20deg);
				/* 调用动画 */
				animation-name: zhuan;
				/* 设置动画执行一次需要10s */
				animation-duration: 10s;
				/* 设置动画无限次循环 */
				animation-iteration-count: infinite;
				/* 设置动画匀速播放 */
				animation-timing-function: linear;
			}

			.box>img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px white;
			}

			.box>img:nth-child(1) {
				transform: rotateY(30deg) translateZ(500px);
			}

			.box>img:nth-child(2) {
				transform: rotateY(60deg) translateZ(500px);
			}

			.box>img:nth-child(3) {
				transform: rotateY(90deg) translateZ(500px);
			}

			.box>img:nth-child(4) {
				transform: rotateY(120deg) translateZ(500px);
			}

			.box>img:nth-child(5) {
				transform: rotateY(150deg) translateZ(500px);
			}

			.box>img:nth-child(6) {
				transform: rotateY(180deg) translateZ(500px);
			}

			.box>img:nth-child(7) {
				transform: rotateY(210deg) translateZ(500px);
			}

			.box>img:nth-child(8) {
				transform: rotateY(240deg) translateZ(500px);
			}

			.box>img:nth-child(9) {
				transform: rotateY(270deg) translateZ(500px);
			}

			.box>img:nth-child(10) {
				transform: rotateY(300deg) translateZ(500px);
			}

			.box>img:nth-child(11) {
				transform: rotateY(330deg) translateZ(500px);
			}

			.box>img:nth-child(12) {
				transform: rotateY(360deg) translateZ(500px);
			}

			/* 在CSS里面，我们可以定义一个动画 */
			@keyframes zhuan {
				from {
					transform: rotateX(-20deg) rotateY(0deg);
				}

				to {
					transform: rotateX(-20deg) rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/2014.jpg" />
			<img src="img/2015.jpg" />
			<img src="img/2016.jpg" />
			<img src="img/2017.jpg" />
			<img src="img/2018上.jpg" />
			<img src="img/w01.jpg" />
			<img src="img/w02.jpg" />
			<img src="img/w03.jpg" />
			<img src="img/w04.jpg" />
			<img src="img/w05.jpg" />
			<img src="img/w06.jpg" />
			<img src="img/w07.jpg" />
		</div>
	</body>
</html>

女朋友相册完整版代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>女朋友相册</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
	<audio src="你的酒馆对我打了烊.mp3" autoplay="autoplay" controls="controls" />
</audio>
		<div class="wrap">
		<div class="cube">
			<div class="out_front">
				<img src="img/1.jpg"  class="pic"/>
			</div>
			<div class="out_back">
				<img src="img/2.jpg"  class="pic"/>
			</div>
			<div class="out_left">
				<img src="img/3.jpg"  class="pic"/>
			</div>
			<div class="out_right">
				<img src="img/4.jpg"  class="pic"/>
			</div>
			<div class="out_top">
				<img src="img/5.jpg"  class="pic"/>
			</div>
			<div class="out_bottom">
				<img src="img/6.jpg"  class="pic"/>
			</div>
			<span class="in_front">
				<img src="img/7.jpg" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="img/8.jpg" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="img/9.jpg" class="in_pic" />
			</span>
			<span class="in_right">
				<img src="img/10.jpg" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="img/11.jpg" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="img/12.jpg" class="in_pic" />
			</span>
		</div>
		</div>
	</body>
</html>

css代码：

html{
	background: #000;
    height: 100%;	
}
/*最外层容器样式*/
.wrap{
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	/*改变左右上下,图片方块移动*/
	
}
/*包裹所有容器样式*/
.cube{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	/*匀速*/
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}
/*定义所有图片样式*/
.pic{
	width: 200px;
	height: 200px;
}
.cube .out_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 100px;
	height: 100px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
	transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(200px);
}

最终效果如下(我只是截了一张静态图，实际为动态3D效果)：

总结

本次项目当中用到了技术点

  1. transform变换
  2. trasnform-style:变换的方式，里面有3D变换
  3. rotate旋转
  4. translate位移
  5. @keyframe定义动画
  6. animation使用动画
  7. “子绝父相”的使用

​ 教程来源：软帝标哥

文章作者: JinJunzheng
文章链接: https://jzjsfx.gitee.io/year/04/04/n/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 JinJunzheng !
html css
赏
评论
评论
  目录