day14-李大人part1

day14

文章目录

• day14
• • 一：动画：
  • • 第一步：定义动画;
    • 第二步：使用动画
    • • 1·1常用：
      • 1·2不常用
  • 二： 伪元素的选择器
  • 三：3d属性
  • • 3d属性的展示：
    • • 方法一：搭建舞台
      • 方法二：景深
    • 3·1：位移
    • • z轴位移：
      • X,Y,Z轴都位移：
    • 3·2，旋装
    • • 3·2·1：X轴旋装：
      • 3·2·2：Y轴旋装：
      • 3·2·3：xyz都旋转
  • 四： 背部隐藏
  • 五：浏览器的前缀：

一：动画：

第一步：定义动画;

动画的定义直接在style标签里进行

方法1：@keyframes 动画名

{

/关键帧/

from{}

to{}

}

方法2：@keyframes 动画名

{

/关键帧/0-100%（百分比划分的是时间，时间划分一般平均）

0%{}

40%{}

80%{}

}

第二步：使用动画

（那个属性使用动画添加到那个属性下）

1·1常用：

• animation-name：动画名；
• animation-duration：时间s/ms；
• animation-delay：延迟执行时间s/ms；

• animation-timing-function：速度状态；

  （linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(慢-快-慢)

• animation-iteration-count: 数字/infinite(无限次)

复合写法

​ animation: 动画名 动画执行的时间 动画延迟时间 动画效果 执行次数

1·2不常用

• animation-direction:

  reverse(关键帧反向播放)/alternate(关键帧交替播放 0%-100%-0%)

• animation-fill-mode:动画停止的关键帧,使用该属性的话不可以设置无限循环，不然停不下来

  forwards(最后一个关键帧)/backwards(第一个关键帧)

• animation-play-state:

  running(运行)/paused(停止)

二： 伪元素的选择器

​ 选中伪元素

​ 父元素::伪元素{}

三：3d属性

3d属性的展示：

方法一：搭建舞台

演示3d效果，需要先搭建一个3d的舞台（给变形元素的父元素搭建舞台）

transform-style:preserve-3d;

方法二：景深

perspective:数值px;(近大，远小)

3·1：位移

（X轴,Y轴在2d上显示）

z轴位移：

transfrom：translateZ（数值px）->不要使用百分比

X,Y,Z轴都位移：

transfrom：translate3d（X,Y,Z）

3·2，旋装

（Z轴在2d上显示）

3·2·1：X轴旋装：

transfrom：rotateX（数值px）->（正数类似于后仰，负数类似于前扑）

3·2·2：Y轴旋装：

transfrom：rotateY（数值px）->（正数类似于向下，负数类似于向上）

3·2·3：xyz都旋转

transform:rotate3d(a,b,c,d)

a b c的取值为 0或者1 0代表不旋转 1代表旋转 d 旋转度数

tranform: rotateX() rotateY() rotateZ();

四： 背部隐藏

​ 设置了透明后，但是不想看到后面的内容，给该元素 backface-visibility: hidden;

五：浏览器的前缀：

火狐（-moz-）：

• 渐变：background-image：-moz-linear-gradient：（）
• 过渡：-moz-transition：all 1s；
• 2d位移：-moz-transform：translate（）
• 定义动画：@-moz-keyframes name{}
• 使用动画：@-moz-animation{}

ion：all 1s；

• 2d位移：-moz-transform：translate（）
• 定义动画：@-moz-keyframes name{}
• 使用动画：@-moz-animation{}