字体图标、svg图标、CSS过渡、形变、过渡、媒体查询、响应式布局字体图标、SVG图标字体的原理当浏览器读到文字的时

字体图标、SVG图标

字体的原理

当浏览器读到文字的时候会转换成对应的unicode（可认为是世界上任意一种文字的特定编号）码。根据font-family查找电脑离对应的字体文件，再根据unicode码去查找其图形，之后绘制到页面上。
展示的文字本质上是某个图行（字体）文件里某个unicode码对应的图形

字体图标的原理

在页面上放入该图标的unicode码（可以随意指定）
让该元素使用我们自定义的字体
字体对应着我们自己创建的字体库文件
字体库文件里有关于该unicode码的外形描述（即font-family）

iconfont如何使用

transition 过渡

当元素样式有变化时，令其平滑过渡

        .box-transition{
            width: 100px;
            height: 100px;
            border: 1px solid brown;
            transition: all .4s;        //令其全部变化在0.4秒中过渡
        }
        .box-transition:hover{
            border-radius: 50px;
            border: 3px dashed darkblue;
        }

上面代码，当鼠标悬停于.box-transition之上时，其样式发生变化，添加transition : all .4s，令其全部变化在0.4秒中过渡，0.4s简写为.4s

transform 形变

平移 translate、旋转rotate、倾斜 skew、缩放 scale

        .box-transition{
            width: 100px;
            height: 100px;
            border: 1px solid brown;
            transition: all .4s;        //令其全部变化在0.4秒中过渡
        }
        .box-transition:hover{
            transform: translate(50px 20%);  //元素向右移动50px，向上移动自身20%的高度
          	transform: translateX/Y(50px);   //元素往X/Y轴向右/上移动50px，如果设置负值则是向下
          	transform: scale(0.5);      //元素按0.5的比例缩小
            transform: scale(2,.4);			//元素在X轴方向上
            transform: rotate(45deg);   //元素顺时针旋转45度
          	transform: skew(30deg 45deg); //元素做一个3D拉扯
          	transform: translateX(60px) sclae(0.7) rotate(45deg);   //啥效果都有
        }

animation 动画

how to use animation

1.定义动画关键帧

        @keyframes gorge{
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(90px) rotate(90deg);
                border: 1px dashed darkblue;
            }
            100% {
                transform: translateX(70px)
            }
        }

上面代码中，@keyframes 是动画关键词后面跟着动画的名字，从0%开始画起，定义各部分（50%、76%）的关键帧，至100%

2.使用动画

      	.box{
        		animation: gorge 4s;
       }

animation: name 动画持续时间;

animation 有哪些关键属性

name：名字
duration：动画持续时长
delay
timing-function：缓动效果，linear 线性平滑过渡、ease 先快后慢、ease-in 先慢后快再慢、
iteration-count：动画次数，3、infinite 不停播放
direction：normal 正向、reverse 逆向、alternate 先正后逆、alternate-reverse 先逆后正，后两个需要动画次数两次以上
fill-mode 动画结束后停在哪里：forward 动画结束后停留在最后一帧、backwards 动画开始前停留在第一帧

@media 媒体查询

让CSS在限定条件下生效

常见条件有：

视口最大（max-width）、最小宽度（min-width）
媒体类型（print or screen）
屏幕方向（orientation）：横屏（landscape）or 竖屏（portrait）
等等

        @media print{
            p{
                border: 1px dashed darkred;    //当设备是打印机时，p标签出现这样的边框
            }      
        }
        @media (min-width:1000px){     //min-width指最小宽度，即视口大于1000px时，元素样式发生变化
            .box-print{
                width: 100px;
                height: 100px;
                margin: 0 auto;
            }
        }
        @media (max-width:800px){     //max-width指最大宽度，即视口小于800px，元素样式发生变化
            body{
                color: darkblue;
            }
        }
        @media (orientation:landscape){   //orientation指视口方向，landscape指屏幕为横屏时候，元素样式发生变化
            .notice{
                color: firebrick;
            }
        }

最后的小tips

::after{
    	content:'';    //设置伪元素代码一定要在里面加个这个！
}