css3动画

学习 CSS3 动画

浏览器内核

• Gecko（内核） 前缀为-moz- 火狐浏览器
• Webit（内核） 前缀为-webkit- 谷歌内核
• Trident（内核） 前缀为-ms- IE 内核
• Presto（内核） 前缀为-o- opera 采用

      /*
          标准写法
        */
        -webkit-text-stroke: 1px red; /* 描边 */
        /* -ms-text-stroke: 1px red;
        -moz-text-stroke: 1px red;
        -o-text-stroke: 1px red;
        stroke: 1px red; */

圆角的形成

• 从指定角的顶端向内部引出水平半径和垂直半径
• 水平半径与垂直半径相交于内部的一点(未来的圆心点)
• 以该点为圆心点，按照水平半径与和垂直半径为半径画圆
• 与边框相交部分为圆角部分

参数设置

  /* 设置圆角  完整格式 两个参数 八个值*/
        /* border-radius: 10px 30px 5px 20px / 10px 5px 12px 60px; */
  /* border-radius: 10px 30px 5px 20px; */
        /* 20为左上右下 水平和垂直 60为右上左下水平和垂直*/
        /* border-radius: 20px 60px; */
        /* 4个角的水平与垂直都相等 */
        border-radius: 10px;
        /* 值设置左上与右上 */
        border-radius: 10px 10px 0 0 / 10px 10px 0 0;

阴影

 box-shadow: 0px 0px 20px 3px #ccc, 0px 0px 20px 3px red inset;
 盒子阴影
        格式 box-shadow：阴影1，阴影2...
        阴影的格式：
            水平偏移位置，垂直偏移位置，模糊度，外延值，颜色，（内置阴影）

渐变

线性渐变

 /* background: linear-gradient(to right, red, green); */
        /* background: linear-gradient(-45deg, red, green); */
        /* background: linear-gradient(to right bottom, red, green); */

近向渐变

  background: radial-gradient(
          closest-corner circle at 20% 20%,
          blue,
          yellow
        );
        /*
        中心（at center center）
            语法（at x y） 都是从左上角为参考原点
            x，y 可以是像素 也可以是百分比
        大小
            最近边 closest-side
            最远边 farthest-side
            最近角 closest-corner
            最远角 farthest-corner
        形状
            ellipse 默认值 椭圆
            circle 圆
    */

Transfrom

Transfrom（2D 转换）

• translate 水平和垂直方向移动移动 支持一个参数 代表水平移动 支持两个参数 代表水平移动与垂直移动
• rotate 旋转 支持一个参数 旋转角度 deg
• scale 缩放 支持两个参数 代表 水平方向与垂直方向 一个参数，则水平与垂直相同倍数
• skew 倾斜 支持一个参数 支持两参数 用的不多
• transition: all 1s; 平滑过渡

   /* transform: translate(-200px); */
        /* transform: translate(0px, -10px);
        box-shadow: 0px 0px 5px 5px #f4f4f4; */
        /* 旋转 一个参数，旋转角度 */
        /* transform: rotate(20deg); */
        /* 缩放  支持两个参数 代表 水平方向与垂直方向 一个参数，则水平与垂直相同倍数*/
        /* transform: scale(1.2); */
        /* 倾斜 */
        transform: skew(40deg, 30deg);

Transfrom（3D 转换）

• translate3D 或 translatex,y,z 平移
• rotate3D 缩放
• rotate3d 旋转
• perspective 开启透视

过渡 Transition

 /* 过渡属性 */
        /*   transition-property: background-color, transform, box-shadow; */
        /* 过渡完成时间 */
        /*         transition-duration: 4s; */
        /*  过渡函数*/
        /*       transition-timing-function: linear; */
        /* 延时执行时间 */
        /*      transition-delay: 1s; */
        /*  所有属性*/
        /* transition-property: all;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 1s; */
        /* 简写属性 */
        /* 3s完成时间 1s延时执行  匀速 */
        transition: all 3s 1s linear;

animation 动画

• 定义关键帧

 @keyframes myName {
        /* 关键帧 时间点 */
        25% {
          margin-left: -2100px;
        }
        50% {
          margin-left: -4200px;
        }
        100% {
          margin-left: -6300px;
        }
      }

• animation 加入动画

 /* 加入动画 */
        /*
            名字 完成时间  无线播放 匀速行驶  延时播放 反向
        */
        animation: myName 10s infinite 1s alternate;

         .box:hover {
        /*
            动画暂停
        */
        animation-play-state: paused;
      }