Web前端学习 10

1.字体图标
第一步：登录，图标官方图标库，选择自己需要的图标加入购物车
第二步：购物车，把购物车的图标加入项目（如果项目不存在就新建项目）
可以从导航上图标管理==》我的项目中找到
第三步：在我的项目页面选中font class ,点击下载进本地
2.2d

移动：translate(x,y)或 translateX() translateY()
旋转：rotate() 正或负
缩放：scale(x,y) 或 scaleX() scaleY()
倾斜：skew(x,y) 或 skewX() skewY()

translate

translate(x,y)	2D转换，沿X和Y轴移动元素
translateX(n)	2D转换，沿X轴移动元素
translateY(n)	2D转换，沿Y轴移动元素

rotate
设定元素顺时针旋转给定的角度，负值表示逆时针旋转
transform:rotate(ndeg);

练习：图片放大 旋转 倾斜 顺时针动

3.3d

移动：translateX/Y/Z()、translate3d() 合写或分开写
旋转：rotateX/Y/Z()、rotate3d()  分开写
缩放：scaleX/Y/Z()、scale3d()

总结：
1.字体图标
2.2d translate,rotate,scale,skew
3.3d translate,rotate,scale
使用步骤：
父：舞台和视角
自己：
transform:translate3d() rotateX() rotateY() rotateZ() scale3d()

一.练习
二.过渡
定义：CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果
语法：

transition:property  duration  timing-function  delay;
property：属性 all all或某个属性
duration: 时间
timing-function：速度
    linear	规定以相同速度开始至结束的过渡效果
    ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
    ease-in	规定以慢速开始的过渡效果
    ease-out	规定以慢速结束的过渡效果
    ease-in-out	规定以慢速开始和结束的过度效果
delay：延迟
transtion:property  duration  timing-function  delay;

三.动画
第一步：定义

 @keyframes move {
    0%{}
    25%{}
    50%{}
    100%{}
 }

动画帧
第二步：调用

animation:name duration timing-function delay interation-count direction;
name：定义动画的名称
timing-function：速度
delay：延迟
interation-count：次数 或 infinite
direction：normal
          reverse
          alternate
          alternate-reverse
animation:move 3s linear 1s 5

兼容性：css3钩子 前缀 -webkit-，-moz-，-ms-，-ms-，-o-

谷歌或苹果：-webkit-animation:firstIn 0.4s ease 1;
火狐：-moz-animation:firstIn 0.4s ease 1;
IE:	-ms-animation:firstIn 0.4s ease 1;
Opera: -o-animation:firstIn 0.4s ease 1;
其他：animation:firstIn 0.4s ease 1;

查看兼容性：https://caniuse.com/
处理css兼容性：
1.清除默认样式，比如*{ padding:0;margin:0}
2.css3前缀
补充：
标准浏览器: 非IE
非标准：IE