html+ css基础笔记_变形_动画_渐变色_字体图标_part2_2

1. 浏览器前缀？（面试）

    CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。
        浏览器        内核        前缀
        IE            Trident        -ms-
        Firefox        Gecko        -moz-
        Opera        Presto        -o-
        Chorme        Webkit        -webkit-
        Safari        Webkit        -webkit-
        Opera、Chorme    Blink

2. transition 过渡？

    transition-property  :  规定设置过渡效果的CSS属性的名称。
    transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
    transition-delay  :  定义过渡效果何时开始。  ( 延迟(数值为正数)，也可以提前(数值为负数) )
    transition-timing-function  :  规定速度效果的速度曲线。默认是ease，linear匀速

    注：不要加到hover上。

3. transform属性变形？

    属性值如下：
    （1）translate : 位移
        translateX
        translateY
        translateZ   ( 3d )
            写法：transform: translate(30px,30px);
    （2）scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
        scaleX
        scaleY
        scaleZ   (3d)
            写法：transform: scale(2,2);
    （3）rotate : 旋转 （ 旋转的值，单位是角度 deg ）
        rotateX  (3d)    
        rotateY  (3d)
        rotateZ  ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )

        写法：transform: rotate(45deg);

    （4）skew : 斜切
        skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
        skewY

    transform的注意事项：
        1. 变形操作不会影响到其他元素。
        2. 变形操作只能添加给块元素，但是不能添加给内联元素。
        3. 复合写法，可以同时添加多个变形操作。
            执行是有顺序的，先执行后面的操作，再执行前面的操作。例如：transform:translate(30px,30px) skew(2deg);
            translate会受到 rotate、scale、skew的影响
        4. transform-origin : 基点的位置（left center top right bottom）
            x y z(3d)

4. animation 动画？(用作复杂动画)

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

    注：
        1. 运动结束后，默认情况下会停留在起始位置。
        2. @keyframes :  from -> 0%   ,  to ->  100%

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

    -moz-animation-direction  :  属性定义是否应该轮流反向播放动画。
         alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
         reverse : 永远都是反向 , 从100%~0%
         normal (默认值) : 永远都是正向 , 从0%~100%
        
        以上属性值都可以直接写到animation复合样式中！！！

5. animate.css？

    一款强大的预设css3动画库。
          官网地址：https://daneden.github.io/animate.css/
             
    基本使用：
        animated : 基类(基础的样式，每个动画效果都需要加)
        infinite : 动画的无限次数

6. 3D操作？

    transform:
    属性值：
       rotateX() : 正值向上翻转
       rotateY() : 正值向右翻转
       translateZ() : 正值向前，负值向后（有放大效果）
       scaleZ() : 立体元素的厚度

    3d写法
        scale3d() : 三个值 x y z
        translate3d() : 三个值 x y z
        rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg

    perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。

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

    transform-origin: center center -50px;   （Z轴只能写数值，不能写单词）

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

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

7. CSS3提供了扩展背景样式？（都与背景有关）

    （1）background-size : 背景图的尺寸大小（会拉伸图片）
    属性值：
        cover : 覆盖（等比放大宽和高都填充完）
        contain : 包含 （宽等比填充，有可能高填不完）
    （2）background-origin : 背景图的填充位置
    属性值：
        padding-box (默认)
        border-box（边框）
        content-box（内容）
    （3）background-clip : 背景图的裁切方式
    属性值：
        padding-box 
        border-box (默认) 
        content-box 

    注：复合样式的时候，第一个是位置，第二个是裁切
        写法：background: url('./img/list_photo.png') content-box padding-box;

8. CSS3渐变？

    1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上

    注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。写法：background-image: linear-gradient(-45deg,red,blue);
        默认是从上到下渐变，上是0%，下是100%,    写法：background-image: linear-gradient(red 25%,blue 75%);

    2. 径向渐变 -> radial-gradient 从中心点向四周扩散，少用,    写法：background-image: radial-gradient(red 25%,blue 45%,yellow 75%);

9. 字体图标？

    font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。例如：天猫首页的购物车、手机小图标
 
      好处：
          1.可以非常方便的改变大小和颜色        font-size    color
          2.放大后不会失真
          3.减少请求次数和提高加载速度
          4.简化网页布局
        5.减少设计师和前端工程师的工作量
        6.可使用计算机没有提供的字体

    使用：
        @font-face语法

        像.woff等文件都是做兼容平台处理的, mac、linux等。file:///C:/Users/ADMINI~1/AppData/Local/Temp/Rar$DRa5700.35220/21_字体图标.html
    免费图标网址：https://www.iconfont.cn/