CSS3从基础渐变、关键帧动画到3d动画perspective属性

1. 简单的渐变动画

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

2. 稍复杂的关键帧动画

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

3. 结合transform 实现3d动画效果

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

看起来还行，学起来也非常容易。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

那咱们就一步一步来玩把~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

transition

transition 是 css3 的一大亮点，他常用的大概有以下一些属性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

• transition-property  --规定设置过渡效果的 CSS 属性的名称
• transition-duration  --规定完成过渡效果需要多少秒或毫秒
• transition-timing-function  --规定速度效果的速度曲线
• transition-delay  --定义过渡效果何时开始

大致代码如下，省略部分代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

button {
  ...
  background-color: red;
  transition-property: opacity, background-color, border-radius; /* 列表以逗号分隔 */
  transition-duration: 0.5s;
  transition-timing-function: ease; /* 默认速度效果 */
  transition-delay: 1s;
  ...
}
button:hover {
  ...
  opacity: 0.3;  background-color: #fff000;
  border-radius: 100px;
  ...
}复制代码

当然，这样写起来有些麻烦，当然你可以简化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

button { 
 background-color: red; 
 transition: opacity  0.5s 1s ease, background-color  0.5s 1s ease, border-radius  0.5s 1s ease; 
}复制代码

以上代码每个逗号隔开4个参数，分别为 CSS 属性、过渡时间、停顿开始时间、速度曲线。 看起来好像还有点麻烦诶：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

button {
  ...  
  background-color: red;  
  transition: all 0.5s 1s ease;
  ...
}复制代码

这样看起来是不是简单多了呢？因为在大部分情况下，我们动画的多种效果一般是同时进行，同时消失的，如果时间不同会变成怎样的一个效果嘞？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

transition: opacity  0.5s 1s ease, background-color  1.5s 2s linear, border-radius  0.5s cubic-bezier(0.215, 0.610, 0.355, 1);复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

所以因此我们可以用一个all便把所有相同效果的css属性代替啦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

嘻嘻，这样是不是又好看，代码还简洁呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

对于 transition-timing-function 这里给大家推荐一个很好用的网站，可以随意调试你想要的贝塞尔速度曲线，点击GO！查看效果。复制最上面的代码，就可以使用到你的代码啦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

点击这里： 我也要去看看效果！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

• animation-name  --规定需要绑定到选择器的 keyframe 名称
• animation-duration  --规定完成动画所花费的时间，以秒或毫秒计
• animation-timing-function  --规定动画的速度曲线
• animation-delay  --规定在动画开始之前的延迟
• animation-iteration-count  --规定动画应该播放的次数
• animation-direction  --规定是否应该轮流反向播放动画

一个一个写还是会略显复杂，这里就直接最终代码效果啦~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

button{
  animation: ani 5s 2s infinite ease;
}

@keyframes ani {
  20%{    opacity: 0.3;  }
  40%{    border-radius: 100px;  }
  60%{    background-color: #fff000;  }
}复制代码

这里的keyframes就像是你声明了一个动画函数，ani就是你的函数名。animation就是去这个button中去执行函数。5个参数分别代表 动画函数名、过渡时间、停顿开始时间、动画的次数（infinite代表无限）、速度曲线。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

animation+transform 3d动画

终于到达最激动人心的时刻了。前面的简单动画可能大部分人都会，不过3d动画可能还是有少数人使用的，它涉及一些3d思想，可能对一些童鞋们较为抽象。不过今天咱们就一点点的来学。其实也很简单~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

话不多说，咱们要实现一个正方体，当然是需要6个平面嘛？（emmmm 这不废话，幼儿园就会了）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

老板，给我来六个花花绿绿的div！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

<p>客观，您要的div：</p>
<div class="aniBox">  
  <div class="ani1"></div> 
  <div class="ani2"></div>
  <div class="ani3"></div>
  <div class="ani4"></div>
  <div class="ani5"></div>
  <div class="ani6"></div>
</div>

.aniBox {
  width: 220px;
  height: 220px;
}
.aniBox>div {
  width: 100%;
  height: 100%;
}
.ani1 {
  background: #4879dc;
}
.ani2 {
  background: #3bd168;
}
.ani3 {
  background: #e31653;
}
.ani4 {
  background: #1ed3eb;
}
.ani5 {
  background: #e9c80f;
}
.ani6 {
  background: #821fd3;
}复制代码

好嘞客官，这是您的div，我给您放到一个大div装好了~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

这里是效果图。。。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

？？？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

emmmm 老板，都从袋子出来了，给我包好~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.aniBox {
  position: relative;
  width: 220px;
  height: 220px;
}
.aniBox>div {
  position: absolute;
  width: 100%;
  height: 100%;
}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

好了，6个div都放到一起啦，开始搞6个面喽；用transform来旋转位移它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

中间的红色，你可以想象成文档流的平面。现在想要将第一个面向前移动div一半的距离：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.ani1 {
  background: #4879dc;
  transform: translateZ(110px) /*前*/
}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

咦 好像没什么变化哎，我明明把 #4879dc  颜色的移动到最前面的位置了呀？经过研究，最后我找到了一个属性transform-style: preserve-3d，这个属性规定如何在 3D 空间中呈现被嵌套的元素。必须设置在父元素身上，并且父元素有转换(就是有变形)，并且子元素也得有转换(变形)才能看得到效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

• transform-style: flat  --子元素将不保留其 3D 位置
• transform-style: preserve-3d  --子元素将保留其 3D 位置

┗|｀O′|┛ 嗷~~ 这样就懂啦：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.aniBox {
  position: relative;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

哈哈哈，效果出来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

好的！ 开始其他的五个面~~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.ani2 {
  background: #3bd168;
  transform: translateZ(-110px)  /*后*/
}
.ani3 {
  background: #e31653;
  transform: rotateY(90deg) translateZ(110px)  /*右*/
}
.ani4 {
  background: #1ed3eb;
  transform: rotateY(-90deg) translateZ(110px)  /*左*/
}
.ani5 {
  background: #e9c80f;
  transform: rotateX(90deg) translateZ(110px)  /*上*/
}
.ani6 {
  background: #821fd3;
  transform: rotateX(-90deg) translateZ(110px)  /*下*/
}复制代码

咦，好像被挡住了看不出什么效果诶~~~ 算了 咱们直接在控制台玩把：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

哈哈，成功了，看起来有效果了，好了 咱们给他加上动画把~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.aniBox {
  position: relative;
  margin: 30px auto;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
  animation: box-3d 5s infinite;
}
@keyframes box-3d {
  100% {
    transform: rotateX(360deg) rotateZ(-720deg)
     /* 让他的结束角度 都为360的整数倍，这样他就可以看起来无缝衔接 */  
  }
}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

咦，这个动画好像先快后慢诶？加个linear把 这样就看起来均匀了：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.aniBox {
  animation: box-3d 5s infinite linear;
}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

本来以为已经完工了，可是总觉得有点不对劲。网上找了找，嗷~~还差一个近大远小的效果！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

既然是房间，那就需要包装一下这个立方体咯~：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

<div class="perBox">
      <div class="aniBox">
        <div class="ani1"></div>
        <div class="ani2"></div>
        <div class="ani3"></div>
        <div class="ani4"></div>
        <div class="ani5"></div>
        <div class="ani6"></div>
      </div>
</div>

.perBox {  perspective: 800px;}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

是不是立体了好多呢？？？？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

什么 看起来没啥效果？？？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

这好办，你想想，加入一个杯子放在一间屋子的最中间，而你站在房屋的窗玻璃处，是不是房屋越小，你看着越具体？ 好的 咱们把房屋弄小一点把！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.perBox {  perspective: 400px;}复制代码

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

哦吼吼~~够立体了把！ ？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

什么你想看这个盒子内部？ 这个div的宽为220px，一半也就是110px;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

那么，只要咱们小于110px，就能看里面了把？  试试来~~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

.perBox {  perspective: 100px;}复制代码

、文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

啊哈哈哈，有没有晕？有没有显卡燃烧的感觉！！！？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

燃烧你的CPU！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

咱们的动画也就讲到这啦，下来咱们看看perspective这玩意的兼容性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9937.html