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

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

php中文网

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

原创

1545人浏览过

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

实现思路：