zoukankan      html  css  js  c++  java
  • css3实现简易loading动画

    css3已经火的不行,我还很淡(dan)定(teng)地在啃着css2,表示很惭愧啊

    周末抽点时间看了下loading效果的实现,开始看到css3有点头大,感觉是不是向外面说的那样每一次标准的发布都像是在学习一门新语言呢,称有些惶恐。。。

    说完废话了....开始show代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>loading动画实现</title>
    </head>
    <style type="text/css">
        body{
            text-align:center;
        }
        .container{
            display: inline-block;
        }
        .point{
            width:10px;
            height:10px;
            background:#2196F3;
            border-radius:50%;
            float:left;
            margin-left:5px;
            animation:myAnima 1.2s ease-in-out infinite; 
        }
        .two{
            animation-delay: 200ms;
        }
        .three{
            animation-delay: 400ms;
        }
        @keyframes myAnima{
            from {opacity: 0.8}
            to{opacity: 0}
        }
    </style>
    <body>
    <div class="container">
        <div class="point one"></div>    
        <div class="point two"></div>    
        <div class="point three"></div>    
    </div>
    </body>
    </html>

    效果图:

    主要用到:css中的animation属性

    animation 属性是一个简写属性,用于设置六个动画属性:

    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction

    实现思路:

    首先,我们需要三个点,这里通过定义三个正方形,并设置他的圆角为50%,来实现的。

    然后,定义一个动画:myAnima(名字可以自定义,此处由于我太懒直接使用animation缩写来命名的),里面定义了透明度从1到0,来实现元素显示和隐藏的效果。

    最后,分别为第二、三个元素设置animation-delay(动画延迟),是他们延迟执行,以达到loading中流动的效果

    END..

  • 相关阅读:
    bzoj 维护序列seq(双标记线段树)
    kmp算法总结
    2013蓝桥杯
    Longge的问题(欧拉,思维)
    mode(思维,注意内存)
    Jam's math problem(思维)
    77
    999
    888
    无 PowerShell.exe 执行 Empire 的几种姿势
  • 原文地址:https://www.cnblogs.com/V-JACK/p/5297904.html
Copyright © 2011-2022 走看看