zoukankan      html  css  js  c++  java
  • Animation用法

    测试代码及说明:

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Simple CSS3 Animation</title>
        <style type="text/css">
            #demo {
                position: absolute;
                left: 30%;
                top: 30%;
                background-color: red;
                width: 200px;
                height: 200px;
                -webkit-animation: animation1 2s linear forwards; /*只有Webkit内核的浏览器才能解析*/
                -moz-animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
                -o-animation: animation1 2s linear forwards; /*Opera浏览器私有属性*/
                -ms-animation: animation1 2s linear forwards; /*IE浏览器私有属性*/
                animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/
            }
    
            @-webkit-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
            }
    
            @-moz-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
    
            @-o-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
    
            @-ms-keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
            }
    
            @keyframes animation1 {
                0% {
                    background: red;
                }
    
                50% {
                    background: blue;
                }
    
                100% {
                    background: yellow;
                }
    
            }
        </style>
    </head>
    <body>
        <div id="demo">
        </div>
    </body>
    </html>
    View Code

    演示效果:

  • 相关阅读:
    解决:微信小程序富文本识别不了空白p标签的方法
    微信小程序
    fastadmin
    微信小程序
    fastadmin使用笔记
    fastadmin使用笔记
    您有新的订单,请注意查收 提示音
    js获取视频第一帧生成图片
    解决JQ WeUI 的 Picker无法动态传值的问题
    微擎 人人商城小程序获取不到用户信息
  • 原文地址:https://www.cnblogs.com/sccd/p/5571165.html
Copyright © 2011-2022 走看看