zoukankan      html  css  js  c++  java
  • CSS3动画效果示例

    CSS3动画遵循@kwyframes规则,规定了动画的名称、时长。

    1、示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS3动画示例</title>
    <style>
    *{margin: 0;padding: 0}
    section{100px;height: 100px;
    background-color: coral;
    position: relative;
    animation: anim 3s infinite alternate;
    -webkit-animation:anim 3s infinite alternate;
    -moz-animation: anim 3s infinite alternate;
    -o-animation: anim 3s infinite alternate;
    margin: 50px auto; }
    @keyframes anim {
    0%{background-color: red;left: 0;top: 0;}
    25%{background-color: green;left: 100px;top: 0;}
    50%{background-color: blue;left: 100px;top: 100px;}
    75%{background-color: yellow;left: 0;top: 100px;}
    100%{background-color: purple;left: 0;top: 0;}
    }
    @-webkit-keyframes anim {
    0%{background-color: red;left: 0;top: 0;}
    25%{background-color: green;left: 100px;top: 0;}
    50%{background-color: blue;left: 100px;top: 100px;}
    75%{background-color: yellow;left: 0;top: 100px;}
    100%{background-color: purple;left: 0;top: 0;}
    }
    @-moz-keyframes anim {
    0%{background-color: red;left: 0;top: 0;}
    25%{background-color: green;left: 100px;top: 0;}
    50%{background-color: blue;left: 100px;top: 100px;}
    75%{background-color: yellow;left: 0;top: 100px;}
    100%{background-color: purple;left: 0;top: 0;}
    }
    @-o-keyframes anim {
    0%{background-color: red;left: 0;top: 0;}
    25%{background-color: green;left: 100px;top: 0;}
    50%{background-color: blue;left: 100px;top: 100px;}
    75%{background-color: yellow;left: 0;top: 100px;}
    100%{background-color: purple;left: 0;top: 0;}
    }
    </style>
    </head>
    <body>
    <section></section>
    </body>
    </html>

    2.示例动画效果

  • 相关阅读:
    mysql week 的使用方法
    获取某个周在本年的开始日期和结束日期
    question and answer
    系统安装
    adblock 下载地址
    windows新增/修改/删除系统环境变量bat示例,一键配置JAVA_HOME
    SpringMVC 复杂对象数据绑定
    IntelliJ IDEA default settings 全局默认设置
    Spring整合Ehcache管理缓存
    label的for属性
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7394050.html
Copyright © 2011-2022 走看看