zoukankan      html  css  js  c++  java
  • css3动画写法

    今天自己摸索了一下css3动画的写法,主要是兼容w3c和WebKit引擎写法。以下是我简单的实现了一个循环播放的家在动画,代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>chasing dot</title>
            <style type="text/css">
                .spiner{//定义容器
                    margin:100px auto;
                    width:40px;
                    height:40px;
                    position:relative;
                    text-align:center;
                    
                    -webkit-animation:rotate 2s infinite linear;//容器加载旋转动画,用时2s,无限循环,线性速度
                    animation:rotate 2s infinite linear;
                }
                .dot1, .dot2{//定义运动元素 可以采用伪元素来代替
                    position: absolute;
                    width:60%;
                    height:60%;
                    display:inline-block;
                    top:0;
                    background-color:#333;
                    border-radius:100%;
                    
                    -webkit-animation: zoom 2s infinite linear;//运动加载缩放动画,用时2S,无限循环,线性速度
                    animation: zoom 2s infinite linear;
                }
                .dot2{
                    top:auto;
                    bottom:0;
                    -webkit-animation-delay:-1.0s;
                    animation-delay:-1.0s;
                }
                @-webkit-keyframes rotate{//定义旋转动画(兼容WebKit写法)
                    100%{-webkit-transform:rotate(360deg)}
                }
                @keyframes rotate{//兼容w3c写法
                    100%{
                        transform:rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    }
                }
                @-webkit-keyframes zoom{//定义缩放动画(兼容WebKit写法)
                    0%,100%{-webkit-transform:scale(0.0)}
                    50%{-webkit-transform:scale(1.0)}
                }
                @keyframes zoom{//兼容W3C写法
                    0%,100%{
                        transform:scale(0.0);
                        -webkit-transform:scale(0.0);
                    }
                    50%{
                        transform:scale(1.0);
                        -webkit-transform:scale(1.0);
                    } 
                }
            </style>
        </head>
        <body>
            <div class="spiner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </body>
    </html>

    效果为:

    其中,动画的运动速度是参数:

    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

    是不是很明了,记录一下,go on,fighting!
  • 相关阅读:
    【Prince2科普】衡量绩效的六大要素
    项目组合管理、项目集管理、项目管理和组织级项目管理之间的关系
    javascript中关系运算符的整理
    javascript中数组的基础----length和元素的求和
    回调函数和递归函数的应用
    谷歌浏览器打开时显示的是搜狗
    二级导航栏的立体显示
    利用css写的中英文切换的导航栏菜单
    javascript中的对象浅谈
    javascript中逻辑运算符总结
  • 原文地址:https://www.cnblogs.com/gruguy/p/4065690.html
Copyright © 2011-2022 走看看