移动web01

字体图标

本地引入

• 在阿里巴巴加购图标之后 下载代码,放到项目中
• link引入icon font的css样式 打开demo_index.html选择font-class 复制所选图标的类名添加到标签上要写上公共类名iconfont

在线引入

• 添加到项目后选择font-class 复制链接用link标签引入记得要加https 复制所选图标的类名添加到标签上要写上公共类名iconfont

本地引入多色图标了解

• .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; font-size: 100px; }

• ​​

属性选择器

[class^="icon"]选择开头

[class$="icon"]选择结尾

[class*="icon"]任意

[class]选择有class这个属性的

[class="div"]选择class这个属性并且值等于div

平面转换

transform

• translate平移

  • 百分比时是参照自身的宽高
  • 只写一个默认是水平平移

• rotate旋转单位是deg默认顺时针

• scale()缩放 大于放大,小于1缩小 只写一个等比例缩放

• 属性连写时要注意位移放前面

• 一个盒子有位移 鼠标经过也要有位移 要保持一致

• 斜切skew()单位是deg

  • 类似平行四方形
  • 应用于檫亮效果 实现檫亮需要渐变辅助

transform-origin

• 方位词
• 像数
• 只写一个另一个默认center

背景渐变

背景渐变的本质是背景图片

• background-image:liner-g(方向,颜色,颜色)
• 方向可以是 to left 从右到左,当成是箭头 to let top 从右下到左上 可以是角度deg 时钟

\