CSS3 从基本渐变、关键帧动画到 3D 动画透视属性

1。简单的渐变动画

2。稍微复杂的按钮帧动画

3。结合变换实现3D动画效果

看起来不错OK，很容易学。步那就一步步来玩吧~~

转场

的过渡是S3的亮点她经常使用以下属性：

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

代码大致如下，省略部分代码：

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;
  ...
}复制代码

当然这样写有点麻烦，当然你可以简化一下：

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

上面的代码有4个参数，用逗号分隔。 、每个 CSS 属性、过渡时间、暂停开始时间和速度曲线。好像有点麻烦：

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

这个是不是看起来比较简单？因为在大多数情况下，我们很多动画的效果通常是一起运行并同时消失的。如果时间不同会产生什么样的效果？

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);复制代码

所以我们可以用一个all来改变css的所有属性，效果是一样的~

嘿嘿，这段代码好不好？

对于过渡时间功能这是一个非常有用的网站，我推荐给大家。可以调试出你想要的贝塞尔速度曲线。点击开始！看看效果。复制上面的代码就可以使用你的代码了~

点这里：我也想看看效果！

动画 + @keyframes

动画 是 CSS3 动画进程。使用@keyframes，您可以获得所需的更复杂的动画行为。

• animation-name - 指定连接到选择器的关键帧的名称
• animation-duration - 指定完成动画所需的时间，以秒或毫秒为单位
• animation-spec-function 动画速度曲线
• animation-delay --指定动画开始之前的延迟
• animation-iteration-count --指定动画应播放的次数
• -animation-direction 如果反向播放 编写动画

一一还是有点复杂。这是最终的代码效果~

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

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

你声明动画函数时的关键帧，ani就是你函数的名称。 动画是到按钮执行功能。 5个参数分别代表动画函数名称、过渡时间、暂停开始时间、动画数量（infinity代表无穷大）、速度曲线。

动画+变形3D动画

最激动人心的时刻终于到来了。大多数人都知道上面的简单动画，但 3D 动画对某些人来说仍然有效。它包含一些 3D 想法，对某些孩子来说可能更抽象。但今天我们将学习一点。其实很简单~~

话不多说，如果我们要做一个正方体，需要6个平面吗？ （emmmmm，这不废话，幼儿园就能做到）；

老大，给我六个彩色div！

<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中~~

这是效果图。 。 。 。

？ ？ ？ ？

中间红色，你可以把它想象成一个文档流场。现在我想将第一个面移动 div 距离的一半：

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

嘿，这似乎没有改变任何东西。我明明把颜色#4879dc移到了前面的位置？经过一番研究，我终于找到了属性变换样式：preserve-3d，它定义了嵌套元素如何在3D空间中渲染。必须设置在父元素上，并且必须修改父元素（即修改），子元素也必须修改（修改）才能看到效果。

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

┗|｀O~~|┛ 这是你怎么知道：

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

哈哈哈，效果来了。

好的！启动另外五个面~~~

.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)  /*下*/
}复制代码

呵呵，好像被挡住了，没有效果~~~算了，还是在控制台上玩吧：

哈哈，有效，好像有效果。好吧，我们给他加个动画吧~~

.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的整数倍，这样他就可以看起来无缝衔接 */  
  }
}复制代码

哎，这个动画看起来先快后慢？添加线性手柄，使其看起来平坦：

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

我以为已经完成了，但总感觉有些不对劲。我上网查了一下，哦~~还是大近小远的效果差！

• perspective – 属性指定 3D 元素与视图的距离（以像素为单位）。该属性允许您更改 3D 元素的外观。当您将透视属性分配给元素时，子元素将获得透视效果，而不是元素本身。

emmmm 很难理解人们在网上说什么。我将用你自己的想法来向你解释。

我认为透视是从房子的中心到人的正面的距离。 （嗯~~还是不知道，算了，上图吧！）

这是一个立方体，你可以想想你房间的大小，还有透视你可以想想它。从这张红脸到ABCD脸的距离。

因为是房间，所以要把这个立方体装起来~：

<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;}复制代码

不是更立体吗？ ？ ？ ？

什么看起来不可能？ ？ ？

很简单，想想看，加一个杯子放在房间中央，你就站在房子的窗户里。你真的会看到一座更小、更混凝土的房子吗？好吧，我们把房子改小一点吧！

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

哦嗬嗬~~是三维的！ ？

你想在这个盒子里看到什么？这个div的宽度是220px，110px的一半；

那么，只要小于110px，我们就能看到里面了？试试吧~~

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

、

啊哈哈，头晕？有没有感觉显卡烧起来了？ ！ ！ ？

烧毁你的CPU！

这是我们的动画，我们来看看透视本章兼容性：

作者：贵妃ets