HTML（三）

第三次培训 ：伪类动画

一 伪类

:hover

选择鼠标指针浮动在其上的元素，并设置其样式

<div class="a"></div>

.a
{
	height: 400px;
	width: 100%;
	background-color: cadetblue;
}
.a:hover
{
	background-color: gray;
}

:active

选择鼠标点击时的元素，并设置其样式

<div class="a"></div>

.a
{
	height: 400px;
	width: 100%;
	background-color: cadetblue;
}
.a:active
{
	background-color: gray;
}

:before :after

选择当前元素的前置或后置流，并设置其样式

<q>一些引用</q>, 他说, <q>比没有好。</q>.

q:before {
  content: "«";
  color: blue;
}
q:after {
  content: "»";
  color: red;
}

CSS transform 与 transition 属性

transform

<div class="anima"></div>

.anima
{
  height: 200px;
  width: 200px;
  background-color: cadetblue;
  transition: all 1.5s;
}
.anima:hover
{
  background-color: indianred;
  transform: scale(1.3);
}

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

transition

<div class="anima"></div>

.anima
{
  height: 200px;
  width: 200px;
  background-color: cadetblue;
  transition: width 1.5s;
}
.anima:hover
{
  background-color: indianred;
  width:400px
}