八音盒动画制作：

通过学到了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;}//子盒子divsection 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;/* 停止动画 */}

效果展示：

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

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...
Unity学习笔记（4）-----粒子效果的实现
Unity学习笔记(4)-–粒子效果的实现一.效果展示下面用若干张张动图展示效果: 大概就是这样,并不是很难. 实际效果要比图中的好一点(顺畅得多). 实现步骤大致可以分为如下几个步骤,然后逐个 ...
jqGrid 学习笔记整理——进阶篇（一）
jqGrid 学习笔记整理--进阶篇(一 ) 本篇为基础篇的扩展,使其具有增.删.改.查的基本功能. 在浏览导航栏添加所需按钮 <!DOCTYPE html> <html>&l ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...

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

八音盒动画制作：

Demo代码：

代码解析：

效果展示：

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

最新文章

热门文章