Day14 CSS3 学习笔记

方庆欢_上海
202 阅读7分钟

1 回顾

1.1 CSS3 背景

1. 新增的背景属性
	background-origin	原点 padding-box、border-box、content-box
	background-clip	设置背景图出现的区域	border-box、 padding-box、content-box、text
	background-size	背景图尺寸	两个长度 / cover、contain
	
2. 复合属性
	position 和 size 一定写一块，并使用 / 分开
	
3. 多背景
   元素可以设置多个背景图片，每组设置用逗号隔开。

1.2 CSS3 边框

1. 边框圆角
   border-top-left-radius
   border-top-right-radius
   border-bottom-left-radius
   border-bottom-right-radius
   border-radius
   
2. 外轮廓	outline
   outline-style
   outline-width
   outline-color
   outline
   oueline-offset	外轮廓的偏移位置（与边框的距离），并非 outline 的子属性

1.3 CSS3 文本

1. text-align-last
2. white-space	值： noraml、pre、pre-wrap、pre-line、nowrap
3. text-overflow	
4. text-shadow
5. 文本修饰
   text-decoration-line	设置哪一种修饰线
   text-decoration-style  修饰线的风格 solid dotted dashed double wavy
   text-decoration-color  修饰线的颜色
   text-decoration	复合属性

1.4 CSS3 渐变

渐变被当做图片使用，需结合使用图片的 CSS 属性来用，如 background-image

1. 线性渐变
   linear-gradient()
   渐变方向， 默认从上大小
   渐变的颜色
   渐变的颜色位置，默认均匀分布

2. 径向渐变
	radial-gradient()
	圆心位置，默认元素中央
	渐变的圆的形状，默认根据元素形状（正方形或矩形）
	渐变的圆的半径，默认到达元素边界
	渐变的颜色
    渐变的颜色位置，默认均匀分布

3. 重复渐变
	repeating-linear-gradient()
	repeating-radial-gradient()

1.5 CSS3 Web 字体

1. WEB 字体使用的基本语法
   @font-face {
   		font-family: '字体的名字（自定义）',
   		src: '字体的地址'
   }

2. 定制字体
   中文字体文件太大，使用完整的字体文件不现实，定制只处理几个文字的字体文件
   
3. 字体图标
   阿里图片
   font-awesome

2 变换 transform

2.1 变换相关 CSS 属性

  • transform 设置元素的变换方式； 可以指定一个或多个变换方法；多个变换方法用空格隔开。

  • transform-origin 设置变换的原点。 默认的原点是元素的中心。 修改 transform-origin 对位移没有影响， 对旋转和缩放会产生影响。

    可以指定两个值，表示x坐标和y坐标； 可以用长度表示坐标，可以使用关键字（left right center top bottom center）
如果指定一个值，表示 x 坐标 ， 坐标取默认值 50%。
如果是 3D 变换，可以设置第三个标签（z坐标）

  • transform-style 用于开启 3D 空间。 给父元素设置。

    flat	默认值，表示处于平面空间。
perserve-3d	开启 3D空间。

  • perspective 设置景深，观察者与平面的距离； 值是长度； 给父元素设置。

  • perspective-origin 设置观察者位置，指定两个长度值作为坐标。 给父元素设置。

  • backface-visibility 设置元素背面是否可见； 值： visible、hidden

2.2 2D 变换的方法

① 位移 translate

translate()		同时设置水平和垂直方向的位移，可以指定两个值，只指定一个值表示水平方向； 值是长度。
translateX()	设置水平方向的位移，指定一个值； 值是长度。
translateY()	设置垂直方向的位移，指定一个值； 值是长度。

② 缩放 scale

scale()		同时设置水平方向和垂直方向的缩放比例， 如果两个值分别是水平方向和垂直方向，如果指定一个值同时设置两个方向相同的缩放比例。 值是数字。
scaleX()	设置水平方向的缩放比例，指定一个值，值是个数字。
scaleY()    设置垂直方向的缩放比例，指定一个值，值是个数字。

③ 旋转 rotate

rotate()	设置旋转的角度；角度的单位是 deg，值越大，顺时针旋转的就越多，正负值都可以设置。

2.3 3D 变换

**注意：**3D变换生效的前提是：

给父元素开启 3D 空间：transform-style:preserve-3d; 并且给父元素设置景深 perspective。

① 3D 位移

translateZ()	沿着Z轴方向位移，指定一个长度作为值
translate3D()	同时指定3个值，必须写3个

② 3D 缩放

scaleZ() 	在Z轴方向缩放，增大或减小元素的厚度（无效果）
scale3d()

③ 3D 旋转

rotateX()	沿x轴旋转
rotateY()	沿y轴旋转
rotateZ()	沿z轴旋转（与2d旋转效果一行）
rotate3d()

3 过渡 transition

3.1 过渡相关 CSS 属性

  • transition-property 设置哪些属性用于过渡，默认值是 all

    all 表示所有变化的且能过渡的 CSS 属性都会过渡。

    哪些 CSS 属性可以过渡？

    已长度作为值的css属性、以颜色作为值的css属性、以数字作为值的css属性、变换

  • transition-duraction 设置过渡的持续时间，注意单位是 s ,表示秒。

  • transition-delay 设置过渡的延迟时间，注意单位是 s ,表示秒。

  • transition-timing-function 设置过渡的动画效果；默认值是 ease

    ease	默认，平滑，先加速再减速

linear	线性

ease-in	加速

ease-out	减速
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier( number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

step-start： 等同于 steps(1, start)

step-end： 等同于 steps(1, end)

steps( integer [, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

    在线制作贝塞尔曲线： cubic-bezier.com/#.17,.67,.8…

  • transition 复合属性。

    如果只设置了一个时间，表示duration； 设置了两个时间，第一是duration，第二个是delay。
其他值没有顺序要求。

3.2 触发过渡的条件

  • CSS3 中的伪类选择器
  • 媒体查询
  • JavaScript 事件

注意：

一定要在没变化的时候设置过渡， 触发条件只设置变化。

4 动画 animation

4.1 关键帧

@keyframes 关键帧的名字 {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes 关键帧的名字 {
    from { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

@keyframes 关键帧的名字 {
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

4.2 动画相关 CSS 属性

  • animation-name 指定关键帧的名字，多个关键字用逗号隔开。

  • animation-duration 指定动画的执行时间，单位是 s。

  • animation-delay 指定动画延迟执行的时间，单位是 s。

  • animation-timing-function 指定动画效果，值同 transition-timing-function 相同。

  • animation-iteration-count 指定动画的执行次数，值：数字、infinite(无限次)； 默认是 1。

  • animation-direction 动画的方向

    normal	默认值，从第一帧到最后一帧。
reverse	反向执行（从最后一帧到第一帧）。
alternate	交替运行（设置执行次数是多次才有效果）
alternate-reverse	反向交替

  • animation-play-state 设置动画的状态（运行或暂停）； 值： running（默认值，运行）、paused(暂停)。

  • animation-fill-state 设置动画执行结束之后的状态。

    none： 默认值。不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始的状态

  • animation 复合属性，设置多个值

    如果只设置一个时间表示 duration，设置了两个时间分别是 duration 和 delay
其他子属性的值没有数量和顺序要求
avatar
文章
阅读
粉丝