CSS3

使用鼠标滚轮进行切换

  • 1. CSS3 边框属性
  • 2. CSS3 文本效果
  • 3. CSS3 2D转换
  • 4. CSS3 3D转换
  • 5. CSS3 过渡
  • 6. CSS3 动画

一、边框属性

1.border-radius

border-radius: 圆角边框，圆

*语法：border-radius: length | %

圆角边框
圆
半圆

2.box-shadow

box-shadow: 阴影

*语法：box-shadow: h-shadow v-shadow blur spread color inset

水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的尺寸, 阴影的颜色, 将外部阴影 (outset) 改为内部阴影

二、文本效果

1.text-shadow

text-shadow: 文本阴影

*text-shadow: h-shadow v-shadow blur color

水平阴影、垂直阴影、模糊距离，以及阴影的颜色

文本阴影效果

2.word-wrap

word-wrap: 自动换行

*语法： word-warp: normal | break-word

Honorificabilitudinitatibus, in Latin

三、2D转换

1.transform

实现元素的位移、旋转、变形、缩放

  • 移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
  • 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
  • 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
  • 倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

2.transform: translate(x, y)

  • 移动 translateX(n) 沿着X轴移动；
  • 移动 translateY(n) 沿着Y轴移动；
  • 移动 translate(x,y) 沿着X,Y轴移动；

3.transform: scale(x, y)

  • 缩放 scaleX(n) 改变元素的宽度；
  • 缩放 scaleY(n) 改变元素的高度；
  • 缩放 scale(x,y) 改变元素的高度和宽度；

4.transform: rotate(deg)

*旋转只是在平面内旋转，没有X,Y轴概念，在3D转换中才有X,Y,Z轴，正值为顺时针，负值为逆时针。

旋转

5.transform: skew(deg, deg)

  • 倾斜 skewX(deg) 定义2D倾斜转换，沿着X轴；
  • 倾斜 skewY(deg) 定义2D倾斜转换，沿着Y轴；
  • 倾斜 skew(deg, deg) 定义2D倾斜转换，沿着X,Y轴；
Y轴倾斜
X轴倾斜
X,Y轴

四、3D转换

1.3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直

2.transform: translate

  • translate3d(x,y,z) 定义3D转化；
  • translateZ(z) 仅使用于Z轴的值；
translate3d

3.transform: scale

  • scale3d(n,n,n) 定义3D缩放；
  • scaleZ(n) 给定Z轴值；
scale3d(n,n,n)

4.transform: rotate

  • rotateX(x) 定义沿着X轴旋转；
  • rotateY(y) 定义沿着Y轴旋转；
  • rotateZ(z) 定义沿着Z轴旋转；
  • rotate3d(x,y,z,angle) 定义3D旋转；

x 类型， 表示旋转轴X坐标方向的矢量。y 类型， 表示旋转轴Y坐标方向的矢量。z 类型， 表示旋转轴Z坐标方向的矢量。a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

X轴旋转
Y轴旋转
Z轴旋转
X,Y,Z

五、过渡

1. transition

可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

  • transition用于在一个属性中设置四个过渡属性
  • transition-property规定应用过渡的 CSS 属性的名称
  • transition-duration定义过渡效果花费的时间
  • transition-timing-function规定过渡效果的时间曲线
  • transition-delay规定过渡效果何时开始

六、动画

1. @keyframes

在 CSS3 中创建动画，必须要知道 @keyframes 规则，@keyframes 规则用于创建动画，通常使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

@keyframes changeBg {
	from {background:red;}
	to {background:yellow;}
}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。必须要规定动画的名称，动画的时长

2. animation

  • @keyframes 规定动画；
  • animation 所有动画属性的简写属性，除了 animation-play-state 属性；
  • animation-name 规定 @keyframes 动画的名称；
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒（0）；
  • animation-timing-function 规定动画的速度曲线（ease）；
  • animation-delay 规定动画何时开始（0）；
  • animation-iteration-count 规定动画被播放的次数（1）；
  • animation-direction 规定动画是否在下一周期逆向地播放（normal）；
  • animation-play-state 规定动画是否正在运行或暂停（running）；
  • animation-fill-mode 规定对象动画时间之外的状态。

3. 案例

animation
thanks
1/9