《CSS3实现漂亮ToolTips效果》(知识点小结)

1.Font Awesome

• ①介绍
  • 1.一个字体文件,249个图标
  • 2.用CSS控制样式
  • 3.无限缩放
  • 4.支持IE7+
• ②使用
  • 1.下载Font Awesome字体样式文件和字体文件
    • http://fontawesome.io/
  • 2.将下载的字体和CSS样式文件拷贝到你的项目目录中去
  • 3.选择一个CSS样式文件
    • font-awesome.less
    • font-awesome.min.css
  • 4.编辑样式文件中的字体路径
  • 5.在项目中引用样式文件即可
  • 6.相关类名对应的图标
    • http://fontawesome.io/icons/
  • 7.案例
    • http://fontawesome.io/examples/
  • 8.类名介绍
    • ①fa //字体类
    • ②fa-home //图标类
    • ③fa-fw //宽度类
    • ④fa-rotate-90 //旋转类
    • ⑤fa-spin //动画类
    • ⑥fa-border //边框类
    • ⑦fa-2x //大小类
    • ⑧fa-li //列表类

2.CSS3兼容查询

• https://caniuse.com/
  3.CSS自动兼容性自动补全
• http://autoprefixer.github.io/
  4.屏幕在旋转时文字的大小不要发生改变

-webkit-text-size-adjust:none;

5.对于IE8及更早版本中的:after,必须声明<!DOCTYPE>。

6.position: absolute;用法

/*定位在父元素顶部*/
bottom: 100%;
/*定位在父元素的底部*/
top:100%

7.所有的CSS3的3d都可以开启移动端的硬件加速

 transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);

8.为了确保旋转时，气泡尖角的位置不变，所以把旋转中心改为底部中心点

/*center bottom===50% 100%*/
transform-origin: center bottom;

9.transition
功能：在一定的时间区间内平滑地过渡指定的属性值

transition:opacity 0.3s,transform 0.3s;

10.transform

• 功能：向元素应用2D或3D转换
• 语法：transform:none | transform-functions
• 参数
  • ①translate3d(x,y,z)定义3D转化
  • ②rotate3d(x,y,z,angle)定义3D旋转
  • ③scale3d(x,y,z,flex)定义3D缩放
  • //x,y,z系数在0~1之间，实践得知x,y,z,不能为0,否则没有动画效果