css动画

1.1-(2d)转换之倾斜.html

  1.  /* 第一个是X轴的倾斜，第二个是y轴的倾斜 */
  2.             transform: skew(45deg, 10deg);
  3.  /* 转换连写的时候，位移在前面。旋转在后面 */
  4. transform: translate(600px) rotate(108deg) scale(2.2);

1.2动画 （animation)

  1. 是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来 实现复杂的动画效果
  2. 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1.用keyframes定义动画（类似定义类选择器)

  1. @keyframes 动画名称{
  2.     0%{width: 100px;}
  3.     100%{width: 200px;}
  4. }
  5. /*0% {
  6.        transform: translate(0, 0);
  7.             }*/

  1. 动画序列

    • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
    • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
    • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词”from”和”to”，等同于0%和100%。
  2. 元素使用动画
    1. div {
    2.  width: 200px;
    3.  height: 200px;
    4.  background-color: aqua;margin: 100px auto;
    5.  /*调用动画*/
    6.  animation-name :动画名称;/*持续时间★
    7.  animation-duration:持续时间;
    8. }
  1. @keyframes move {
  2.             0% { transform: translate(0, 0); }
  3.             25% {transform: translate(1000px, 0);}
  4.             50% {transform: translate(1000px, 500px); }
  5.             75% { transform: translate(0px, 500px); }
  6.             100% {transform: translate(0, 0px);}
  7.         }

2.1 透视

  1. 视距，是眼睛距屏幕的距离，加到父元素上，会有透明的效果
    perspective: 800px;

  2. 语法：perspective: 像素值;

  3. 作用

    1. 产生近大远小的视觉效果

  4. 注意点

    1. 给父元素添加
    2. 取值一般为600px ~ 1000px
    1. transform: translateX(100px);
    2. transform: translateY(100px);
    3. transform:translatez(-200px);
    4. 3d位移连写transform(x,y,z)*/

2.2-3D旋转

  1. transform: rotateZ(360deg);
  2. /*前边的之是1或者0，1代表旋转，0不旋转，分别对应的是x,y ,z轴*/旋转的连写transform: rotate3d(1,1,1，36odeg);
  3. transform: rotate3d(1,1,1,360deg);

  1. 语法

    1. rotateX(角度)
    2. rotateY(角度)
    3. rotateZ(角度) <=> rotate(角度)
    4. rotate3d(x, y, z, 角度) （了解）
  • 左手法则（判断旋转方向）
    左手握住旋转轴，大拇指指向旋转轴正方向，其余手指卷曲的方向就是旋转方向

4.2缩放

  1. transform: scaleZ(倍数);
  2. transform: scale3d(x, y, z);

3.1 立体呈现

  • 语法

    • transform-style: preserve-3d;

  • 作用

    • 使盒子处于真正的三维空间
    • 注意给父元素添加

案例-3d转换立方体

需要使用transform-style

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             position: relative;
  11.             /*转化3D,使盒子处在三维空间*/
  12.             transform-style: preserve-3d;
  13.             perspective: 800px;
  14.             width: 200px;
  15.             height: 200px;
  16.             border: 1px solid #000;
  17.             margin: 200px auto;
  18.         }
  19.         .box div {
  20.             position: absolute;
  21.             width: 100%;
  22.             height: 100%;
  23.             opacity: .5;
  24.         }
  25.         .box div:nth-child(1) {
  26.             background-color: red;
  27.             transform-origin: left center;
  28.             transform: rotateY(-90deg);
  29.         }
  30.         .box div:nth-child(2) {
  31.             background-color: green;
  32.             transform-origin: right;
  33.             transform: rotateY(90deg);
  34.         }
  35.         .box div:nth-child(3) {
  36.             background-color: blue;
  37.             transform-origin: top;
  38.             transform: rotatex(90deg);
  39.         }
  40.         .box div:nth-child(4) {
  41.             background-color: pink;
  42.             transform-origin: bottom;
  43.             transform: rotatex(-90deg);
  44.         }
  45.         .box div:nth-child(5) {
  46.             background-color: yellow;
  47.         }
  48.         .box div:nth-child(6) {
  49.             background-color: purple;
  50.             transform: translatez(200px);
  51.         }
  52.         .box:hover {
  53.             transform: rotate3d(1, 1, 2, 380deg);
  54.             transition: all 2s;
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <div class="box">
  60.         <div></div>
  61.         <div></div>
  62.         <div></div>
  63.         <div></div>
  64.         <div></div>
  65.         <div></div>
  66.     </div>
  67. </body>
  68. </html>

3D转换

/ 父元素里边的子元素处于三维空间，给父元素添加 /

  1.   transform-style: preserve-3d;

linear 匀速状态属性

动画相关属性

  1. /* 调用动画的名称 */
  2. animation-name: move;
  3. /* 一次动画播放的时间 */
  4. animation-duration: 1s;
  5. /* 动画延迟，动画等呆多久才开始 */
  6. animation-delay: 1s;
  7. /* 动画播放的次数，默认是一次，循环播放是infinte 
  8. 可以写数值*/
  9. animation-iteration-count: infinite;
  10. /* 动画停在什么位置,backwards是停在开始位置，forwards是停在结束位置 */
  11. animation-fill-mode: forwards;
  12. /* 动画播放的方向  alternate 逆播（反方向） */
  13.  animation-direction: alternate;

总结

  1. 3D转换

    • 位移
    • translate3d(), translateX() , translateY(), translateZ()
    • 旋转

    • rotate3d(), rotateX(), rotateY(), rotateZ()

    • scale3d(), scaleX(), scaleY() , scaleZ()

    • perspective

    • transform-style: preserve-3d;

    • 定义动画

    • @keyframes 动画名称 {}

    • 使用动画

    • animation