css动画效果之一 

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: #5CBE3E;
                animation-name: fromLeftToRight;/*   取个名字 */
                animation-duration: 4s; /*  //变化所要的时间 */
                animation-iteration-count: infinite;
                 /* 要循环多小次 */   /* （无数次循环） */
            }
            /* 定义动画 */
                      /*  用名字要和（取个名字)一样 */
            @keyframes fromLeftToRight {
                from { /*  从什么开始 */
                    margin-left: 0;
                }
                to { /* 到什么结束 */
                    margin-left: 100px;
                }
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
    </body>

　　

   <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                background: #5CBE3E;
                margin: 5px;
                animation-name: fromLeftToRight;/*取个名字 */
                animation-duration: 3s;/*多小时间循环一次 */
                animation-iteration-count: infinite;
            }    /* 要循环多小次 */      /*（无限次循环） */
              .box:hover {
                animation-play-state: paused;
            }/* 当鼠标放在图片上时图片不移动 */
            
            .reverse {
                animation-direction: reverse;
            } /* 从结束到开始地点 */
            
            .alternate {
                animation-direction: alternate;
            } /*从开始到结束再从结束到开始 */
            
            .alternate-reverse {
                animation-direction: alternate-reverse;
            }/*从结束到开始再开始到结束 */
            
            @keyframes fromLeftToRight {
                from {/* 从什么开始 */
                    margin-left: 0;
                }
                to {/* 到什么结束 */
                    margin-left: 300px;
                }
            }
        </style>
    </head>

    <body>
        <div class="box"></div>
        <div class="box reverse"></div>
        <div class="box alternate"></div>
        <div class="box alternate-reverse"></div>
    </body>

　　

   <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img {
                opacity: 0;
            }
            
            img:hover {
                animation: fadeIn 1s ease-in forwards;
            } /* hover的变化过程1秒 */
            
            @keyframes fadeIn {
                from {/* 从什么 */
                    opacity: 0;
                }
                to {/* 到什么 */
                    opacity: 1;
                }
            }
        </style>
    </head>

    <body>
        <img src="images/1.jpg" alt="一张图片

        " width="300" />
    </body>

　　

posted @ 2016-08-15 21:32  刘文武  阅读(115)  评论(0)    收藏  举报