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