实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE HTML>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <title>实例
6
        </title>
7
    </head>
8
    <body>
9
        <style type="text/css">.demo_box{
10
            border:1px solid #3DA5DC;
11
            background:#a4dcf9;
12
            height:100px;
13
            width:200px;
14
            text-align:center;
15
            color:#fff;
16
            }
17
            .animation_duration{
18
                left:10px;
19
                top:100px;
20
                position:absolute;
21
                -webkit-animation:0.5s ease 1 forwards;
22
                -webkit-animation-duration:2s;
23
                -webkit-animation-name:demo;
24
                -moz-animation:0.5s ease 1 forwards;
25
                -moz-animation-name:demo;
26
                -moz-animation-duration:2s;
27
            }
28
            @-webkit-keyframes demo{
29
                0%{
30
                    left:10px;
31
                }
32
                100%{
33
                    left:400px;
34
                }
35
            }
36
        </style>
37
        <div class="demo_box animation_duration">我一共运行了2秒钟
38
        </div>                      
39
    </body>                   
40
</html>
41
​