浅谈:CSS3的渐变以及2D转换

1. CSS3渐变

CSS3 Gradient 分为线性渐变(linear)径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同

1.1 线性渐变

  • 语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);

注意:

  • direction:默认为to bottom,也就是从上向下的渐变;
  • stop:指的是颜色的分布位置,默认为均匀分布,如果有3个颜色,那么各个颜色的stop均为33.33%。
角度英文作用
0degto top从下到上
90degto right从左到右
180degto bottom从上到下
270degto left从右到左
to top left有下角到左上角
totopright左下角到右上角

1.2 径向渐变

  • 语法:
background: radial-gradient(center, shape, size, start-color, ..., last-color);

注意:

  • center:渐变起点的位置,可以为百分比,默认是图形的正中心。
  • shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
  • size:渐变的大小,即渐变到哪里停止,它有四个值。
  • closest-side:最近边; farthest-side:最远边;closest-corner:最近角; farthest-corner:最远角。

1.3 重复线性渐变

  • repeating-linear-gradient() 函数用于重复线性渐变
  • 语法:
background: repeating-linear-gradient(red, red 10%, balck 20%);

注意: 10%的位置为red,20%的位置为black,然后按照这20%向下重复

1.4 重复径向渐变

  • repeating-radial-gradient() 函数用于重复线性渐变
  • 语法:
background: repeating-radial-gradient(red, red 10%, black 20%);

2. CSS3的2D转换

2.1 transform

  • rotate(): 旋转函数(取值度数)
    • Transform-origin:旋转的基点
  • skew(): 倾斜函数(取值度数 (扭曲))
    • skewX() skewY()
  • scale() :缩放函数 (取值 正数、负数和小数)
    • scaleX()scaleY()
  • translate() :位移函数
    • translateX()translateY()

2.2 rotate() 方法

  • 单位:deg
  • 通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
  • 例如:值 rotate(30deg) 就是把元素顺时针旋转 30 度

2.3 skew() 方法

  • 通过 skew() 方法,元素翻转(倾斜/扭曲)给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
  • 例:值 skew(30deg,20deg) 就是围绕 X 轴把元素翻转(倾斜/扭曲) 30 度,围绕 Y 轴翻转(倾斜/扭曲) 20 度。

2.4 scale() 方法

  • 通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
  • 例:值 scale(2,4) 就是把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

2.5 translate() 方法

  • 通过 translate() 方法,元素从其当前位置移动,根据给定的left(x 坐标) 和 top(y 坐标) 位置参数
  • 例:值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

3. CSS3过渡

① 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,
当元素从一种样式变换为另一种样式时为元素添加效果。

  • Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
  • Safari 需要前缀 -webkit-。
  • 注:Internet Explorer 9 以及更早的版本,不支持 transition 属性;Chrome 25 以及更早的版本,需要前缀 -webkit-。

3.1 transition

  • transition-property 要运动的样式 (all || [attr] || none)
  • transition-duration 运动时间
  • transition-delay 延迟时间
  • transition-timing-function 运动形式
    • ease:(逐渐变慢)默认值
    • linear:(匀速)
    • ease-in:(加速)
    • ease-out:(减速)
    • ease-in-out:(先加速后减速)

3.2 pointer-events

pointer-events直译为指针事件

pointer-events:auto/none 

设置为none后,有如下相关特性:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的hover和active状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件

3.3 backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见

backface-visibility: visible|hidden;
// visible 背面是可见的
// hidden 背面是不可见的

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页