css3图表字体

  1. 在项目中,引入字体文件mzd.ttf
  2. 引入方法:
  1. @font-face {
  2. font-family:mzd;
  3. src:url("font/mzd.ttf");
  4. }
  5. .box {
  6. font-family: mzd!important;
  7. }
  • 先下载你要使用的字体放在项目根文件下的font文件夹中
  • 使用@font-face定义字体font-family定义字体的名字src:url()引入字体的路径
  • 使用字体,在想用字体的地方使用font-family使用即可
  1. 图表字体的使用
  • www.iconfont.cn(阿里巴巴矢量图)
  • font-awesome字库
  • Glyphicons 字体图标

counter计数器

CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的。于是,就有了,“计数器↔伪元素↔content属性”的铁三角关系

  1. counter的成员主要有三个:
  • counter-reset(计数器声明及初始值设置)
  • counter-increment(递增规则)
  • counter(name,连接符)/counters(计算结果生成)
  1. counter-reset主要有三个属性:
  • none:默认。不能对选择器的计数器进行重置。
  • name num:name即标记计数器名称,num即记录计数器初始值。num非必写,默认为0。
  • inherit:规定应该从父元素继承 counter-reset 属性的值。
  1. counter-increment主要有三个属性。
  • none:没有计数器将递增。
  • name num:name即选择递增的计数器,num即增量。num非必写,默认为1,可以是正数、零或者负数。
  • inherit:指定counter-increment属性的值,应该从父元素继承。

过渡效果

之前使用样式变化太生硬所以现在选择使用过渡效果来实现
transition:从一种效果到另一种效果 前提:必须有一个事件来触发

  • 当过渡属性添加在hover上的时候只有hover上的时候才有过渡效果当过渡属性添加在元素本身上的时候则不管是hover还是出去的时候都有过渡效果当元素本身和hover上去的时候都有过渡效果时,则hover上去时是hover里面的transition产生的效果,出去的时候是元素本身上的transition产生的效果。

过渡属性

  1. transition简写属性,用于在一个属性中设置四个过渡属性。
  2. transition-property 规定应用过渡的 CSS 属性的名称。
  3. transition-duration 定义过渡效果花费的时间。默认是 0。
  4. transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”:
  • ease先快后慢
  • linear恒速
  • ease-in: 速度越来越快
  • ease-out: 越来越慢
  • ease-in-out: 先慢再快再慢
  1. transition-delay 规定过渡效果何时开始。(延迟多少时间)默认是 0。
    过渡效果无法对一个页面中不存在的元素进行一个从无到有的操作,所以对diplay:none和到diaplay:block不起作用
    display:none表示对一个元素隐藏,不占位