animation:自定义名称 2s;

/*关键帧的创建*/
@keyframes 自定义名称 {
    from{CSS样式}         /*第一个动画的关键帧   开始样式*/
    percentage{CSS样式}   /*执行过程样式*/
    to{CSS样式}           /*改变样式*/
    /*可用百分比1-100*/
}
/*调用关键帧*/
animation:
            animation-name             /*创建的关键帧名称*/
            animation-duration         /*动画时间*/
            animation-delay            /*延迟时间*/
            animation-iteration-count  /*动画播放次数*/
            animation-direction        /*动画播放方向*/
            animation-play-state       /*动画播放状态【控制】*/
            animation-timing-function  /*动画方式【关键帧变化】*/
                默认值为1
                特殊值infinite ：表示无限次播放
                normal         ：动画每次都是循环向前播放
                alternate      ：动画播放为偶数次则向前播放
                running        ：将暂停的动画重新播放
                paused         ：将正在播放的元素动画停下来
            animation-fill-mode:动画开始之前和结束之后发生的操作
                forwards 动画在结束后继续应用最后的关键帧的位置
                backwards 向元素应用动画样式是迅速应用动画的初始帧
                both 元素动画同时具有forwards和backwards的效果

.bird {
    min-width: 91px;   /*宽度*/
    min-height: 71px;  /*高度*/
    background: url(http://img.mukewang.com/55ade1700001b38302730071.png)/*图片*/
}
.birdFly{
    animation-name: bird-slow;/*名称*/
    animation-duration: 400ms;/*时间*/
    animation-timing-function: steps(3);/*steps要配合精灵图使用，简单来说就是用来切换多个精灵图的，形成帧动画*/
    animation-iteration-count: infinite;/*次数【无限次】*/
}
@keyframes bird-slow {
    0% {
        background-position: -0px 0px;
    }
    100%{
        background-position: -273px 0px;
    }
}

/*放在父类*/
display: flex;              
justify-content:space-between; 

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

//页面加载时
window.onload = function() {
    //获取容器
    $(‘#grid‘).masonry({
        //瀑布流布局中的单项选择器
        itemSelector: ‘.grid-item‘,
        columnWidth: 200
    });
}

//页面加载时
window.onload = function() {
    var grid = document.querySelector(‘#grid‘);
    var msnry = new Masonry(grid, {
        itemSelector: ‘.grid-item‘,
        columnWidth: 200
    });
}

display:grid;

/*轨道大小*/
.container{
    display: grid;                                    /*定义网格容器*/
    grid-template-columns : 40px 50px auto 50px 40px ;/*5列*/
    grid-template-rows : 25% 100px auto ;             /*3行。。。(或更多)*/
}
/*网格线名称+轨道大小*/
.container{
    display: grid;                         /*定义网格容器*/
    /*5列【网格线名称+轨道大小】*/
    grid-template-columns :[one]40px [two]50px [three]auto [fout]50px [five]40px ;
    grid-template-rows : 25% 100px auto ;        /*3行。。。(或更多)*/
}

.container{
    tgrid-template-areas : "header header header header"  //第一行
                           "main main . sidebar"          //第二行
                           "footer footer footer foot"    //第三行
} 

grid-template-columns :repeat(5,100px) ;

.c .t:nth-child(7){
    background-color: royalblue;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
} 

unction resize() {
        var w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w * 20 / 290 + "px";
}
window.onresize =resize 

@font-face {
    font-family: myiconfont2; 
    font-family: <Name>;
    src: url(‘fontello-e1116127/font/fontello.woff2‘); 
    src: <source> [<format>][, []]*;            };
    [font-weight: <weight>];         
    [font-style: <style>];
} 

<style type="text/css">/*引入字体*/
    @font-face {
        font-family:iconfont;                     /*自定义字体名称*/
        src: url("fontello-e1116127/font/fontello.woff2");   /*字体路径【注：一定要“/”】*/
        font-weight: normal;                                 /*加粗*/
        font-style: normal;                                  /*字形，如斜体*/
    }
    h1,h2{
        font-family:iconfont;     /*使用字体*/
    }
</style>
<h1>&#xe800;</h1>        <!--字体编号：&#开头-->

/*方法二、伪元素*/
h2:after{
    content: "\e804";
}       
<h2></h2>

<!--方法三、引入字体样式-->
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0(字体图标)/css/font-awesome.min.css"/>
<!--根据规则使用字体-->
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

 @font-face {
     font-family:sketch3d;
     src: url("webfontkit-20180823-073032/chased_through_the_woods-webfont.woff2");
}
h1{
    font-family: sketch3d;
}
<h1>Holle Web</h1>