html自学笔记（css3字体以及动画）

在 CSS3 之前，我们只能使用计算机上安装好的字体。通过 CSS3，我们可以使用他们喜欢的任意字体。--------引用w3c原文。

自定义字体很简单，在css样式表中

@font-face {    font-family: cusFont;    src: url(../soure/汉鼎繁综艺.TTF);}

font-family 自定义的字体的名字

src字体来源地址，可以是一个本地路径，也可以是一个网络链接。使用方式：

div{    font: 20px/25px ‘cusFont‘;

    text-align: center;}这样就可以使用自己定义的字体了。

动画个人理解：css3中动画几乎都是属性动画，如字体颜色改变加上动画，宽高的改变动画等。添加动画，首先要 声明动画。先以一个字体的颜色改变为动画。

  /*标题颜色改变动画*/
        @keyframes colorChange {
            20%{color: red;}
            40%{color: goldenrod;}
            60%{color: gold;}
            80%{color: greenyellow;}
            100%{color: white;}

        }

        @-moz-keyframes colorChange {
            20%{color: red;}
            40%{color: goldenrod;}
            60%{color: gold;}
            80%{color: greenyellow;}
            100%{color: white;}

        }

        @-webkit-keyframes  colorChange{
            20%{color: red;}
            40%{color: goldenrod;}
            60%{color: gold;}
            80%{color: greenyellow;}
            100%{color: white;}

        }

        @-o-keyframes  colorChange{
            20%{color: red;}
            40%{color: goldenrod;}
            60%{color: gold;}
            80%{color: greenyellow;}
            100%{color: white;}

        }

        .animation{
            animation: colorChange 2s;
            -moz-animation: colorChange 2s;
            -webkit-animation: colorChange 2s;
            -o-animation: colorChange 2s;

            animation-iteration-count:infinite;
            -moz-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
        }

再给需要加上动画的标签加上动画，就可以实现字体颜色的改变了。