CSS学习笔记——动画进阶(八音盒动画效果)

最新推荐文章于 2023-06-21 06:45:00 发布

kk楷楷

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量460

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45331887/article/details/117000233

版权

前端同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

css学习

3 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

八音盒动画制作：

通过学到了CSS3动画以后，发现通过动画也是可以制作八音盒，话不多说，走起！

Demo代码：

HTML片段

<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>

CSS样式

<style>
			body{
				perspective: 1000px;/* 定义透视 */
			}
			
			//父盒子
			section{
				position: relative;//相对定位
				width: 300px;
				height: 200px;
				margin: 100px auto;
				transform-style: preserve-3d;
				animation: move 10s linear infinite;
				background: url(../../../images/champion.jpg) no-repeat;
			}
			//子盒子div
			section div{
				position: absolute;//绝对定位
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(../../../images/champion.jpg) no-repeat
			}
			
			/* z轴移动200个像素单位,选中第一个盒子*/
			section div:nth-child(1){
				transform: translateZ(300px);
			}
			
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			/* 选中第二个盒子 */
			section div:nth-child(2){
				
				transform: rotateY(60deg)  translateZ(300px);
			}
			
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(3){
				
				transform: rotateY(120deg)  translateZ(300px);
			}
			
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(4){
				
				transform: rotateY(180deg)  translateZ(300px);
			}
			
				/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(5){
			
				transform: rotateY(240deg)  translateZ(300px);
			}
			
				/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(6){
			
				transform: rotateY(300deg)  translateZ(300px);
			}
			/* 定义一个动画效果 */
			@keyframes move{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);/* 沿着y轴移动360度 */
				}
			}
			
			/* 当鼠标经过盒子的时候，停止旋转 */
			section:hover{
				animation-play-state: paused;/* 停止动画 */
			}
			
			
			
		</style>

代码解析：

首先在body中定义一个父容器section，在父容器里面嵌套6个子div盒子模型，并且将子盒子div容器添加一个绝对定位，父容器设置相对定位，也就是所谓的“子绝父相”，使得子盒子可以在父盒子的范围中，位置也可以随意调整，并且不影响其他外部盒子。

section{
		position: relative;//相对定位
		width: 300px;
		height: 200px;
		margin: 100px auto;
		}
//子盒子div
section div{
		position: absolute;//绝对定位
			}

通过伪类元素给子盒子添加移动的效果，总共有6个盒子，所以设置每个盒子都移动60度，刚好就是360度

             /* 选中第一个盒子 */
             /* z轴移动200个像素单位,选中第一个盒子*/
			section div:nth-child(1){
				transform: translateZ(300px);//想Z轴移动300个像素单位
			}
			
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			/* 选中第二个盒子 */
			section div:nth-child(2){		
				transform: rotateY(60deg)  translateZ(300px);
			}
			
			/* 选中第三个盒子 */
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(3){		
				transform: rotateY(120deg)  translateZ(300px);
			}
			
			/* 选中第四个盒子 */
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(4){
				transform: rotateY(180deg)  translateZ(300px);
			}
			
			/* 选中第五个盒子 */
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(5){
				transform: rotateY(240deg)  translateZ(300px);
			}
			
			/* 选中第六个盒子 */
			/* 这里要先旋转后在移动，不然图片的位置会和预计的效果不一样 */
			section div:nth-child(6){
				transform: rotateY(300deg)  translateZ(300px);
			}

旋转动画的定义
这里定义一个动画，名字为move。from代表着0%，也就是动画刚开始的时候， to代表100%，也就是动画完成的时候。这里的八音盒案例，通过分析可以得出是沿着Y轴进行移动，所以只需要给动画添加rotateY的方法即可。

/* 定义一个动画效果，动画名字为：move */
			@keyframes move{
				from{
					transform: rotateY(0);/* 沿着y轴移动0度 */
				}
				to{
					transform: rotateY(360deg);/* 沿着y轴移动360度 */
				}
			}

调用动画
通过animation属性调用动画，参数分别是动画名字、过渡时间、动画的速度曲线、动画的播放次数。

transform-style: preserve-3d;/* 保留3d的效果 */
animation: move 10s linear infinite;

除此之外，还需要给body设置透视的效果，效果更加噢！

body{
	perspective: 1000px;/* 定义透视 */
	}

最后可以给盒子父盒子设置一个hover选择器，当鼠标经过图片的时候，八音盒停止旋转！

/* 当鼠标经过盒子的时候，停止旋转 */
section:hover{
			animation-play-state: paused;/* 停止动画 */
			}

效果展示：

在这里插入图片描述

kk楷楷

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习笔记——动画进阶(八音盒动画效果)

八音盒动画制作：  通过学到了CSS3动画以后，发现通过动画也是可以制作八音盒，话不多说，走起！Demo代码：HTML片段<body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div&gt
复制链接

扫一扫