移动Web第一天

1.字体图标

1优点

0. 灵活 随时修改颜色和尺寸
1. 体积小
2. 兼容性好

2用法两种

0. unicode
1. font-class

3，免费的字体图标网站

• iconfont

4，工作中

0. 如何制作图标 美工的工作了解
1. 前段关注 如何根据拿到的图标 来使用他！！

5，了解

0. 使用SVG来生成字体图标
1. 字体图标实现原理

2.平面转换

1，三大形态

0. 位移translate

   0. translate(2px)
   1. translate(2px,10px)
   2. translate(50%,30%)

   2.旋转rotate

   0. rotate(deg)

   3.缩放

   0. scale(1.3)
   1. scale(1)

变换transform

改变旋转的中心点 transform-origin

0. 方位名词
1. px
2. %

3.渐变

1 只能给背景图片添加background-image

2 线性渐变 linear-gradient

0. linear-gradient(black.red)
1. linear-gradient(black 10%, red 50%)
2. linear-gradient(to right,black 10%, red 50%)

拓展知识1写案例步骤

0. 先分析 主要结构 大结构 html结构
1. 再写 静态 css效果
2. 再去考虑 hover 过度 动态效果

移动web第二天

空间位移

0. 位移

1. translateX

2. translateY

3. translateZ 默认情况下看不见元素在z轴上的变换

4. translate3d(x,y,z)

5. 旋转

   0. rotateX
   1. rotateY
   2. rotateZ
   3. rotate3d(x,y,z)

6. 缩放

7. 立体坐标系

   0. x轴
   1. Y轴
   2. 新 Z轴 ！ 方向由屏幕里面指屏幕外面

   4其他

   0. 视距 perspective看不见元素 近大远小
   1. 左手准则 根据左手来判断的方向 方便我们判断代码如何执行或者根据效果图来反推代码
   2. 3d立方体 立方体呈现开启3d空间 transform-style:perserve-3d