查看: 3507|回复: 0

[DIV/CSS] 《CSS3实现漂亮ToolTips效果》(知识点小结)

发表于 2018-2-13 08:00:02

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,必须声明。

6.position: absolute;用法

  1. /*定位在父元素顶部*/
  2. bottom: 100%;
  3. /*定位在父元素的底部*/
  4. top:100%
复制代码

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

  1. transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
复制代码

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

  1. /*center bottom===50% 100%*/
  2. transform-origin: center bottom;
复制代码

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

  1. 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,否则没有动画效果


回复

使用道具 举报