实习5

before和after伪元素(详解)
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意：一定要有content，否则伪元素不起作用

过渡(CSS3)
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。

transition	简写属性，用于在一个属性中设置四个过渡属性。
属性	描述
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

• 2D变形(CSS3) transform
  transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
  • 移动 translate(x, y)
    translate 移动平移的意思
    使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
    可以改变元素的位置，x、y可为负值；
    translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
    让定位的盒子水平居中
  • 缩放 scale(x, y)
    对元素进行水平或垂直方向的缩放
    scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
    scaleX(x)元素仅水平方向缩放（X轴缩放）
    scaleY(y)元素仅垂直方向缩放（Y轴缩放）
  • 旋转 rotate(deg)
    可以对元素进行旋转，正值为顺时针，负值为逆时针；
    transform:rotate(45deg);
  • transform-origin可以调整元素转换变形的原点
    transform-origin: 50px 10px ; (如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值)
  • 倾斜 skew(deg, deg)
    transform:skew(30deg,0deg);
  • 3D变形(CSS3) transform
    • rotateX() ,沿着 x 立体旋转.
    • rotateY(),沿着y轴进行旋转
    • rotateZ(),沿着z轴进行旋转
  • 透视(perspective)
    透视原理： 近大远小 。
    浏览器透视：把近大远小的所有图像，透视在屏幕上。
    perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
  • translateX(x)
    仅水平方向移动**（X轴移动）
  • translateY(y)
    仅垂直方向移动（Y轴移动）
  • translateZ(z)
    前后移动，直观的表现就是大小变化
  • translate3d(x,y,z)
    [注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
• backface-visibility
  backface-visibility 属性定义当元素不面向屏幕时是否可见。
• 动画(CSS3) animation
  animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;