html5中loading动画怎么用

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5中loading动画怎么用相关的知识，希望对你有一定的参考价值。

参考技术A loadding动画现在有2中方式实现：
1.旧方法：用PS或者Flash制作gif格式的动态图片，导入到html里面
2.用css3的动画属性（animite）,直接通过样式+div就可以制作出loading效果
当然优缺点也很明显，第一种方法不需要考虑兼容性，第二种方法，适用于移动端和PC端上高版本的浏览器，因为低版本的浏览器对css3的兼容性只有一个词来形容--坑爹啊。

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>