CSS3核心模块

CSS3核心模块

过渡动画

• transition
  

  ：过渡动画

  • transition-property：过渡属性 all[attr]

  • transition-duration：过渡时间

  • transition-delay：延迟时间

  • transition-timing-function
    

    ：运行类型

    • ease：（逐渐变慢）默认值
    • linear：匀速
    • ease-in：加速
    • ease-out：减速
    • cubic-bezier：贝塞尔曲线

过渡动画效果思考步骤：

1. 找到过渡属性
2. 找到过渡属性起始值和结束值
3. 在合适的位置上增加transition属性

2D变换

• transform
  

  ：变形属性

  • rotate()
    

    ：旋转函数

    • deg：度数
    • transform-origin：旋转的基点

  • skew()
    

    ：倾斜函数

    • skewX()
    • skewY()

  • scale()
    

    ：缩放函数 默认值是1

    • scaleX()
    • scaleY()

  • translate()
    

    ：位移函数

    • translateX()
    • translateY()

animation-声明关键帧

• 关键帧——

  @keyframes
  

  • 类似于

    flash
    
    

    • 定义动画在每个阶段的样式，即帧动画

  • 关键帧的时间单位

    • 数字：0%、25%、100%等（设置某个时间段内任意时间点的样式）
    • 字符：from(0%)、to(100%)：

  • 格式

    • @keyframes：动画名称
    • {动画状态}

animation-调用动画

• 必要属性

  • animation-name：动画名称（关键帧名称）
  • animation-duration：动画执行时间

• 可选属性：

  • animation-timing-function
    
    

    • linear：匀速
    • ease：缓冲
    • ease-in：由慢到快
    • ease-out：由快到慢
    • ease-in-out：由慢到快再到慢
    • ease-bezier(num,num,num,num)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

  • animation-delay：动画延迟

  • animation-iteration-count：重复次数

  • animation-direction：动画运行的方向 normal|reverse|alternate|alternate-reverse

  • animation-play-state：动画状态 running|paused

  • animation-fill-mode：动画结束后的状态 none|forwards|backwards|both

3D变换

• transform-style: flat|preserve-3d：3D空间展示

• perspective：景深效果

• transform: persective(800px)：直接作用在子元素上

• transform
  
  

  ：新增函数

  • translate3d(tx, ty, tz)：translateX() translateY() translateZ()
  • rotate3d(rx, ry, rz, a)：rotateX() rotateY() rotateZ()
  • scale3d(sx, sy, sz)：sacleX() sacleY() sacleZ()

圆角 border-radius

• border-radius
  
  

  ：1-4个数字/1-4个数字

  • 水平半径/垂直半径

  • 四个数字方向分别是左上 右上 右下 左下

  • 没有

    /
    
    

    则水平半径和垂直半径一样

    • border-radius: 10px/5px;
    • border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
    • 例子：圆 椭圆 半圆 扇形

线性渐变 linear-gradient

• linear-gradient：（[<起点>||<角度>,]?<点>,<点>…）
• 只能用在背景上
• 颜色是沿着一条直线轴变化
• 参数
  • 起点：开始渐变方向
  • 角度：开始渐变角度
  • 点：渐变点的颜色和位置
• 重复线性渐变

径向渐变 radial-gradient

• radial-gradient

• 从“一点”向多个方向颜色渐变

• shape形状：ellipse、circle或设置水平半径，垂直半径

• size
  
  

  ：渐变的大小，即渐变停止位置：

  • closet-side：最左边
  • farthest-side：最远边
  • closet-corner：最近角
  • farthest-corner：最远角（默认值）

• position：关键词|数值|百分比

• 重复的径向渐变

背景

• background-origin
  
  

  • padding-box：从padding区域显示
  • border-box：从border区域显示
  • content-box：从content区域显示

• background-clip
  
  

  • padding-box：从padding区域向外裁剪
  • border- box：从border区域向外裁剪
  • content-box：从content区域向外裁剪
  • text：文本裁剪

• background-size
  
  

  • 100% 100%：百分比
  • 10px 10px：数值
  • contain：按原始比例收缩，背景图显示完整，但不一定铺满整个容器
  • cover：按原比例收缩，背景图可能显示不完整，但铺满整个容器

• background-attachment
  
  

  • 背景图片是滚动/固定 fixed(固定的) 默认是滚动的

盒子阴影

• box-shadow
  
  

  ：h v blur spread color inset;

  • h：水平方向偏移
  • v：垂直方向偏移
  • blur：模糊半径
  • spread：扩展半径
  • color：颜色
  • inset：内阴影，默认是外阴影

文本阴影

• text-shadow：x y blur color

  • x轴偏移 y轴偏移 模糊度 颜色
  • 多层阴影制作文字立体效果，设置多种颜色，中间以逗号隔开

• 文字添加边框

  • text-stroke
    
    

    ：2px blue

    • 通过设定1px的透明边框，可以让文字变得平滑
    • 颜色设成透明能够创建镂空字体

滤镜

• -webkit-filter:normal;：正常
• -webkit-filter:grayscale(1);：灰度，取值范围0-1
• -webkit-filter:brightness(0);：亮度，取值范围0-1
• -webkit-filter:invert(1);：反色，取值范围0-1，0为原图，1为彻底反色
• -webkit-filter:sepia(0.5);：叠加褐色，取值范围0-1
• -webkit-filter:hue-rotate(30deg);：色相（按照色相环旋转，顺时针方向）（红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜
• -webkit-filter:saturate(4);：饱和度，取值范围0-*，0为无饱和度，1为原图，值越高，饱和度越大
• -webkit-filter:contrast(2);：对比度，取值范围0-*，0为无对比度（灰色），1为原图，值越高对比度越大
• -webkit-filter:opacity(0.8);：透明度，取值范围0-1，0为全透明，1为原图

遮罩

• mask-image：
• mask-position：
• mask-repeat：

https://whjin.github.io/frontend-dev-doc/
内容来前端开发文档 写是为了方便监督我看一遍