学习html，css第三周的一些总结

对最近的学习情况做些总结（逆战班）：

1. CSS Sprite（雪碧图）

   特点：优化网页的手段，提高加载速度。
   好处
   可以减少图片的质量，网页的图片加载速度快
   减少图片的请求的次数，加快网页的打开

   通过PS工具中的切片工具，可以非方便的测量位置和大小。

   在线处理雪碧图：http://alloyteam.github.io/gopng

2. 超大图居中

   1. 用背景 : background : center 0;
   2. 用图片 : position:relative; left:50%; margin-left:-容器的一半。

3. 滑动门

   选项卡、标签页（tab）

    特殊元素要添加 唯一的class标识。
   

4. 轮播图

   考虑一下切换的方向，左右排列，还是上下，还是叠加。

5. 模拟实现一些漂亮的控件

   复选框、上传按钮：
   label方式
   position + opacity方式

   下拉菜单：也可以模拟
   ul -> li
   input type=“hidden”

6. CSS3

   CSS3是CSS的最新版本。
   width height background border 都属于 CSS2.1
   CSS3 会保留之前 CSS2.1的内容，只是添加了一些新的语法。

   CSS3 : border-radius :nth-of-type() background-size

7. transition过渡

   transition-property : 规定设置过渡效果的CSS属性的名称。
   all ( 默认值 ) , 指定 width , height;

   transition-duration : 规定完成过渡效果需要多少秒或毫秒。
   需要添加单位：s (秒) ms (毫秒) 1s == 1000ms

   transition-delay : 定义过渡效果何时开始。
   2s : 延迟两秒进行过渡
   -2s : 提前两秒进行过渡

   transition-timing-function : 规定速度效果的速度曲线。
   运动形式：加速、减速、匀速…
   linear
   ease（默认值）
   ease-in
   ease-out
   ease-in-out
   cubic-bezier
   （ http://cubic-bezier.com ）

   复合写法：
   transition:all 2s linear; √
   transition:linear 2s all; √
   transition:2s linear all; √
   注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。

   transition:2s 3s linear all; √
   

   注意：不要把transition放到hover中

8. transform变形

   translate : 位移
   transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
   transform:translateX(100px);
   transform:translateY(100px);
   transform:translateZ(100px); ( 3d )

   scale : 缩放
   transform:scale(num) num是一个比例值，正常比例是1。
   transform:scale(num1 , num2) 两个值 分别对应 w 和 h
   transform:scaleX()
   transform:scaleY()
   transform:scaleZ() ( 3d )

   rotate : 旋转
   transform:rotate(num) num是旋转的角度 30deg
   正值：顺时针旋转
   负值：逆时针旋转
   表示一个角：角度deg 或 弧度rad

   rotateX()    ( 3d )
   rotateY()    ( 3d )
   rotateZ()  
   注 : rotate()跟rotateZ()是等价关系。
   

   skew : 斜切
   transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
   transform:skewX()
   transform:skewY()
   注：skew没有3d写法。

   注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
   注：变形操作对inline(内联元素)不起作用的。
   注：transform可以同时设置多个值。
   先执行后面的操作，在执行前面的操作。
   位移会受到后面要执行的缩放、旋转和斜切的影响。

9. tranform-origin 基点位置

   主要是针对 旋转和缩放，默认都是中心点为基点。

10. 做特效

    要确定：起点值和结束值。

    套路：1.先把静态的效果做出来。
    2. 把要运动的终点位置先做出。
    3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
    4. 写 tranform变形的起点值 (起点的位置)

11. animation动画

    原理：逐帧动画。会把整个运动过程，划分成100份。

    animation-name : 设置动画的名字 (自定义的)
    animation-duration : 动画的持续时间
    animation-delay : 动画的延迟时间
    animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
    animation-timing-function : 动画的运动形式
    ease linear

    @keyframes 动画的名字 {
    from {}
    to {}
    }

    from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%
    注：默认情况下，元素运动完毕后，会停到起始位置。

    复合样式：
    animation

    animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
    none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
    backwards : 在延迟的情况下，让0%在延迟前生效
    forwards : 在运动结束的之后，停到结束位置
    both : backwards和forwards同时生效

    animation-direction : 属性定义是否应该轮流反向播放动画。
    alternate : 一次正向(0%_{100%)，一次反向(100%}0%)
    reverse : 永远都是反向 , 从100%~0%
    normal (默认值) : 永远都是正向 , 从0%~100%

12. animate.css

    一款强大的预设css3动画库。
    官网地址：https://daneden.github.io/animate.css/

    基本使用：
    animated : 基类(基础的样式，每个动画效果都需要加)
    infinite : 动画的无限次数
    如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。

13. 3D效果

    perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
    3D的眼镜

    rotateX
    rotateY
    translateZ
    scaleZ
    
    注：反馈回来的立体，仅限于平面。
    

    transform-style : 3D空间
    flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

    注：只要是有厚度的立体图形，就必须添加3D控件。
    
    注：在立方体中默认会沿着第一个面进行旋转。
        tranform-origin : x y z; (z不能写单词，只能写数字)
    

    perspective-origin : 景深-基点位置，观察元素的角度。

    backface-visibility : 背面隐藏
    hidden、visible (默认值)

    3d写法( 扩展学习 )
    scale3d() : 三个值 x y z
    translate3d() : 三个值 x y z
    rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
    rotate3d(1,1,1,30deg);
    scale translate skew

14. background-origin : 背景图的填充位置

    默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。

    padding-box (默认) : 在padding区域开始填充背景图
    border-box : 在border区域开始填充背景图
    content-box : 在content区域开始填充背景图

15. background-clip : 背景图的裁切方式

    padding-box
    border-box (默认)
    content-box

    注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。

16. CSS3渐变？

    线性渐变：
    background-image:linear-gradient( 20deg , red , blue);
    注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

    径向渐变：
    radial-gradient : 径向渐变

17. 字体图标

    font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。：你可以想象成一个小图片，其实它不是图片，而是一个字。
    好处：
    1.可以非常方便的改变大小和颜色
    font-size:40px; color:red;
    2.放大后不会失真

    3.减少请求次数和提高加载速度
        
    4.简化网页布局
        因为字体图标就是一个内联的元素，所以左右布局非常简单
    5.减少设计师和前端工程师的工作量
    
        用第三方库：www.iconfont.cn
    
        animate.css库
    

18. 文字阴影

    text-shadow
    x
    y
    blur
    color
    多阴影

    注：默认情况下，阴影的颜色跟文字的颜色相同。

19. 盒子阴影

    box-shadow
    x
    y
    blur : 模糊值
    spread : 范围
    color
    inset : 内阴影 outset(默认值：外阴影 , 写上outset不会生效，不写就是外阴影)
    多阴影

    注：默认盒子的阴影就是黑色。

20. 浏览器前缀
    浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。

    chrome safari -webkit-
    ie -ms-
    firefox -moz-
    opear -o-

21. 罩
    mask
    url
    repeat
    x
    y
    w
    h
    多遮罩

    注：需要在服务器环境下，之前通过右键打开方式都是本地打开。
    注：如何在服务器环境下打开这个页面，下载插件：live server

22. 倒影
    box-reflect
    above 上
    below 下
    left 左
    right 右
    距离
    遮罩 | 渐变
    注：渐变必须是不透明渐变到透明