animation 动画、字体、背景 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*div{
            width: 200px;
            height: 200px;
            background-image: url(images/Koala.jpg),url(images/Penguins.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
        padding: 50px;    */
        /*background-origin: padding-box;    */
    /*    background-origin: border-box;    */
    /*background-origin: content-box;    
        border: 1px solid #ccc;

            
        }*/


    @font-face
    {
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf')
            ,url('Sansation_Light.eot'); /* IE9 */
    }

    div
    {
        font-family:myFirstFont;
    }










        div{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 5px solid #eee;
            background-color: #666;
            background-clip: padding-box;
            background-clip: border-box;
            background-clip: content-box;
            /*animation: dong 5s;*/
            animation-name: dong;/* 规定 @keyframes 动画的名称。*/
            animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
            animation-timing-function: linear;/* 规定动画的速度曲线。默认是 "ease"。*/
            animation-delay: 2s;        /* 规定动画何时开始。默认是 0*/
            animation-iteration-count:infinite; /*规定动画被播放的次数。默认是 1。*/
            animation-direction: alternate;  /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
            animation-play-state: running;/* 规定动画是否正在运行或暂停。默认是 "running"。*/

        }
        @keyframes dong{
            0% {background: red;}
            20%{background: yellow}
            50%{background: blue}
            100%{background: green}
        }

    </style>
</head>
<body>
    <div>背景  字体  动画</div>
    
</body>
</html>

 

posted @ 2017-06-06 18:25  Jinsuo  阅读(250)  评论(0)    收藏  举报