当前位置:首页 > 网页特效 > css样式 >

简单的HTML5网页Div动画,左右移动动画

时间:2014-03-20 08:38 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 简单的HTML5网页Div动画,左右移动动画,没有使用JS之类的,完全是HTML5和CSS3实现的简单动画,或许对学习HTML5网页制作有一定参考作用。
  • <!DOCTYPE html>
    <html>
    <head>
    <title>简单的HTML5网页Div动画,左右移动动画</title>
    <style type="text/css">
    @-webkit-keyframes 'fkf'
    {
        from {width:500px;
        height: 500px;
        background-color:#ff0000;
        }
        to{
        width:500px;
        height: 500px;
        background-color: #00ff00;
        margin-left: 800px;
        }
    }
    .table1 {
        width: 500px;
        height: 500px;
        -webkit-animation-name: 'fkf';
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count:10000;
    }
    </style>
    </head>
    <body>
    <div class="table1"></div>
    </body>
    </html>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/7004.html

css样式下载排行

最新文章