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..

 

posted @ 2016-03-20 15:32  V_JACK  阅读(1855)  评论(0)  编辑  收藏  举报