css3实现简易loading动画_html/css_WEB-ITnose-html教程-PHP中文网

css3实现简易loading动画_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:23:32

原创

1191 人浏览过

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%，来实现的。