阅读 51

CSS 知识总结

一、transform

1. transform属性的可选值

可选值:

  • 平移:translate(x,y)
  • 缩放:scale(x,y)
  • 旋转:rotate(deg)
  • 倾斜:skew(deg,deg)

特点:

  • 对于行内元素无效,对于行内替换元素、行内块元素、块元素有效
  • 多个transform函数之间用空格来并列

1.1 translate(x,y)

translateX translateY translateZ

  • 设置一个值时,设置x轴上的位移
  • 设置两个值时,设置x轴和y轴上的位移
  • 值类型:
    • 数字:100 px
    • 百分比:参照元素本身(refer to the size of bounding box)
  • 对行内元素无效

1.2 scale(x,y)

  • 设置一个值时,设置x轴上和y轴上相同的缩放
  • 设置两个值时,设置x轴和y轴上的缩放
  • 取值
    • 数字:1——保持不变;2——放大一倍;0.5——缩小一半
    • 百分比:不支持百分比

1.3 rotate(deg)

  • deg :旋转的角度,顺时针为正
    • 例子:transform :rotate(45 deg)
    • 旋转的原点就是transform-origin

1.4 skew(deg,deg)

  • 值的单位:deg,顺时针为正
  • 一个值时,表示x轴上的倾斜
    • 两个值时,表示x轴和y轴上的倾斜

2. transform-origin

  • 只有一个值,设置的是x轴的原点
  • 同时两个值,同时设置x轴和y轴的原点
  • 取值可以是数字,百分比,或者left,center,right等关键字,百分比参考的是元素本身

3. 3D相关

3.1 前提

  • 设置perspective属性
  • transform-style: preserve-3d;
html{
            /*perspective 视距 ,设置人的眼睛和网页之间的距离*/
            perspective: 800px;
}
复制代码

3.2

二、transition

transition属性是多个css属性的缩写,包括:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

1. transition-property

  • 作用:指定应用过渡属性的名称
  • 取值:width/height/all...
    • 多个属性间使用,隔开
    • 如果所有属性都需要过渡,则使用all关键字
    • 属性是否支持动画查看文档,一般数字型的都可以

2. transition-duration

  • 作用:指定过渡动画所需的时间
  • 单位可以是秒或者毫秒
  • 例子:transition-duration :100ms /1s

3. transition-timing-function

  • 作用:指定动画的变化曲线
  • 取值:ease/ease-in/ease-out
    • ease 默认值,慢速开始,先加速,再减速
    • linear 匀速运动
    • ease-in 加速运动
    • ease-out 减速运动
    • ease-in-out 先加速 后减速
    • cubic-bezier() 来指定时序函数:cubic-bezier.com
    • steps() 分步执行过渡效果,配合图片实现动画效果
    • 可以设置一个第二个值:
      • end , 在时间结束时执行过渡(默认值)
      • start , 在时间开始时执行过渡

4. transition-delay

  • 作用:延迟/等待多久再次执行动画

5. 例子

\

\

\

\

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 132px;
      height: 271px;
      background-image: url("bigtap-mitu-queue-big.png");
      transition: all 0.3s steps(4);
    }

    .box:hover {
      background-position: -528px 0px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
复制代码

三、动画animation

1. 使用步骤

设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤

.box{
    position: absolute;
    width: 300px;
    height: 100px;
    background-color: #bfa;
    left: -250px;
    top:200px;
    animation: test-animation 1s linear infinite alternate ;
}
@keyframes test-animation {
    0%{
        left: -250px;
    }
    100%{
        left: 0px;
    }
}
复制代码

2. 属性取值

  • animation-name: 要对当前元素生效的关键帧的名字
  • animation-duration: 动画的执行时间
  • animation-delay:动画的延时
  • animation-iteration-count:
    • infinite:无限次
  • animation-direction: 指定动画运行的方向
    • normal 默认值 从 from 向 to运行 每次都是这样
    • reverse 从 to 向 from 运行 每次都是这样
    • alternate 从 from 向 to运行 重复执行动画时反向执行
    • alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
  • animation-play-state: 设置动画的执行状态
    • running 默认值 动画执行
    • paused 动画暂停
  • animation-fill-mode: 动画的填充模式
    • none 默认值 动画执行完毕元素回到原来位置
    • forwards 动画执行完毕元素会停止在动画结束的位置
    • backwards 动画延时等待时,元素就会处于开始位置
    • both 结合了forwards 和 backwards
文章分类
前端
文章标签