字体图标,平面装换2D,颜色渐变
字体图标的下载:
阿里图标库,添加购物车至项目,下载到本地download
字体图标本地的使用:
后缀.ttf.woff.woff2三个字体文件,才能正确显示字体图标,iconfont.css字体图标的CSS,复制这4个文件即可
引入iconfont.css
标签类名调用iconfont(必加)+icon-xxx(图标名)
字体图标的在线使用:
我的项目---生成在线链接---复制引入(引入字体图标css前加http:)---然后正常调用,推荐在线使用
平面转换2D(x,y左上为负值)
transform(变形)实现移动,旋转,缩放等
transform:translate(x,y)变形位移,不会影响页面布局,margin位移会影响页面布局
transform:rotate(单位deg)变形旋转角度,正数顺时针,负数逆时针。transfrom-origin:x,y,可以设置旋转的中心点,默认居中
transform:scale(x,y)变形缩放,以中心点进行缩小放大,值为数字,1为原值。
颜色渐变
background:linear-gradient(to right,white70%,black,blue)。渐变效果,默认从上往下进行颜色渐变,可以通过to+方位,设置开始和结束渐变方向,颜色后面可以跟上占用大小百分比。