小声嘀咕中——勿扰
如今CSS3的动画，JS都能实现，而且提倡的是HTML、CSS、JS三者分离，交互这些东西都可以有JS来实现。那我们CSS3 的动画的意义何在？是不是都没有学习的必要了？那肯定，你懂得。下面：
一、CSS3 的动画基础知识
1.CSS3 转换
A.2D转换
-2D 转换是改变标签在二维平面上的位置和形状
- 移动： translate
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px)
}
- 旋转： rotate
div{
/* 旋转 0度 */
transform: rotate(0deg);
}
img:hover {
/*顺时针方向旋转 360度 */
transform: rotate(360deg)
}
- 缩放： scale
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
-2D 转换综合写法以及顺序问题
.格式为 transform: translate() rotate() scale()
.顺序会影响到转换的效果(先旋转会改变坐标轴方向)
.同时有位置或者其他属性的时候，要将位移放到最前面
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
B.3D转换
- 3D 位移：translate3d(x, y, z)
div{
/*仅仅是在 x 轴上移动*/
/*transform: translateX(100px);*/
/*仅仅是在 y 轴上移动*/
/*transform: translateY(100px);*/
/*仅仅是在 Z 轴上移动*/
/*transform: translateZ(100px);*/
/*x、y、z 分别指要移动的轴的方向的距离*/
transform: translate3d(100px, 100px, 100px);
/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
/*transform: translate3d(100px, 100px, 0)*/
}
-3D旋转rotate3d(x, y, z)
/*围绕 x 轴正方向旋转130度*/
/*transform: rotateX(130deg);*/
/*围绕 y 轴负方向旋转180度*/
/*transform: rotateY(-180deg);*/
/*围绕 z 轴正方向旋转130度*/
/* transform: rotateZ(130deg);*/
/*沿着自定义轴旋转 45 deg 为角度*/
transform: rotate3d(x, y, z, 45deg);
/*沿着对角线旋转 45deg*/
/*transform: rotate3d(1, 1, 0, 180deg);*/
/* 沿着 x 轴旋转 45deg*/
/* transform: rotate3d(1, 0, 0, 180deg);*/
- 透视 perspctive
body {
/*透视需要写在被视察元素的父盒子上面*/
perspective: 1000px;
}
- 3D呈现 transfrom-style
div{
/*代码写给父级，但是影响的是子盒子*/
/*preserve-3d子元素开启立体空间;flat子元素不开启立体空间*/
transform-style: preserve-3d;
}
2.CSS3动画是什么？
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。
- 您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
- 0% 是动画的开始，100% 是动画的完成。
- 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
/*1.定义动画*/
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
/*2.使用动画*/
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
二、CSS3 的动画效果展示区
1.3D骰子动画
效果图如下（示例）：
实现动画的思路：
| 展现效果 | 思路及知识点 |
|---|---|
| 骰子有六个面 | 盒子和定位知识 |
| 六个面在不同的方向 | 用到位移和旋转的知识 |
| 3d旋转 | 3D呈现 和 CSS3动画知识 |
部分代码如下（示例）：
section {
margin-top: 200px;
margin-left: 550px;
width: 130px;
height: 130px;
/*开始3d立体视图*/
transform-style: preserve-3d;
/*调用动画*/
animation: move 12s linear infinite;
}
/*定义动画，沿着对角线旋转*/
@keyframes move {
0% {
transform: rotate3d(1, 1, 0, 0);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
}
}
/*鼠标经过，动画暂停*/
section:hover {
animation-play-state: paused;
}
div {
position: absolute;
width: 100%;
height: 100%;
}
/*调盒子的位置*/
section div:first-child {
transform: translateZ(80px);
background: url(images/1.png) no-repeat;
}
section div:nth-child(2) {
transform: translateX(80px) rotateY(-90deg);
background: url(images/2.png) no-repeat;
}
section div:nth-child(3) {
transform: translateZ(-80px);
background: url(images/3.png) no-repeat;
}
section div:nth-child(4) {
transform: translateX(-80px) rotateY(90deg);
background: url(images/4.png) no-repeat;
}
section div:nth-child(5) {
transform: translateY(-80px) rotateX(-90deg);
background: url(images/2.png) no-repeat;
}
section div:last-child {
transform: translateY(80px) rotateX(90deg);
background: url(images/1.png) no-repeat;
}
2.西游记四人行
效果图如下（示例）：
实现动画的思路：
| 展现效果 | 思路及知识点 |
|---|---|
| 四个小人 | 四个盒子和背景图定位知识 |
| 四个小人走路 | CSS3动画知识 |
| 注意 | 背景图测量的大小 |
代码如下（示例）：
<div class="box">
<div class="wk"></div>
<div class="wn"></div>
<div class="ts"></div>
<div class="wj"></div>
</div>
<style>
body {
background: url(images/bac.webp) no-repeat;
}
.box {
margin: 400px 0 0 400px;
width: 775px;
height: 235px;
}
.wk,
.wn,
.ts,
.wj {
float: left;
}
.wk {
width: 180px;
height: 165px;
background: url(images/west_01.png);
animation: move 1s steps(8) infinite;
}
.wn {
width: 210px;
height: 165px;
background: url(images/west_02.png);
animation: move 1s steps(8) infinite;
}
.ts {
width: 170px;
height: 240px;
background: url(images/west_03.png);
animation: tsz 1s steps(8) infinite;
}
.wj {
width: 210px;
height: 165px;
background: url(images/west_04.png);
/*调用动画*/
animation: wj 1s steps(8) infinite;
}
/* 定义动画 */
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -1600px 0;
}
}
@keyframes tsz {
from {
background-position: 0 0;
}
to {
background-position: -1360px 0;
}
}
@keyframes wj {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
</style>
希望能帮助大家！！！！！！
