欢迎来到NiceSpace!祝大家开心每一天!
  • css
一个简单的CSS加载动画

最近学习css,之前看过诺基亚手机的一个加载动画,所以想做一个类似的动画,动画效果如下(个别浏览器无法看到效果):

源码:

html:

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>animate</title>  
  5. </head>  
  6. <body>  
  7.   
  8. <div class="animate-continer back">  
  9.     <div class="animate">  
  10.         <div></div>  
  11.         <div></div>  
  12.         <div></div>  
  13.         <div></div>  
  14.     </div>  
  15. </div>  
  16.   
  17. <style type="text/css">  
  18. </style>  
  19. </body>  
  20. </html>  

 

CSS:

 

  1. .animate-continer {
        background: rgb(50, 50, 50);
        opacity: 0.4;
        overflow: hidden;
    }

    .animate {
        position: relative;
    }

    .animate>div:first-of-type,
    .animate>div:nth-child(2),
    .animate>div:nth-child(3),
    .animate>div:last-of-type {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        top:100px;
        margin: 2px;
    }

    .animate>div:first-of-type {
        left:-15px;
        background: rgb(255, 255, 255);
        animation: loader 3s  200ms infinite;
        -webkit-animation: loader 3s  200ms infinite; /* Safari 与 Chrome */
    }

    .animate>div:nth-child(2) {
        left:-30px;
        background: rgb(255, 255, 255);
        animation: loader 3s  400ms infinite;
        -webkit-animation: loader 3s  400ms infinite; /* Safari 与 Chrome */
    }

    .animate>div:nth-child(3) {
        left:-45px;
        background: rgb(255, 255, 255);
        animation: loader 3s  600ms infinite;
        -webkit-animation: loader 3s  600ms infinite; /* Safari 与 Chrome */
    }

    .animate>div:last-of-type {
        left:-60px;
        background: rgb(255, 255, 255);
        animation: loader 3s  800ms infinite;
        -webkit-animation: loader 3s  800ms infinite; /* Safari 与 Chrome */
    }

    .back {
        margin:auto;
        width: 300px;
        height: 200px;
        border-radius: 10px;
    }

    @keyframes loader {
        0% { width:5px; height:5px; transform: translate(0, 0);}
        45% { width:10px; height:10px; transform: translate(187px, 0); }
        55% { width:10px; height:10px; transform: translate(187px, 0); }
        100% { width:5px; height:5px; transform: translate(375px, 0); }
    }

    @-webkit-keyframes loader
    {
        0% { width:5px; height:5px; transform: translate(0, 0);}
        45% { width:10px; height:10px; transform: translate(187px, 0); }
        55% { width:10px; height:10px; transform: translate(187px, 0); }
        100% { width:5px; height:5px; transform: translate(375px, 0); }
    }

 

将css部分的代码放入到html中的<style>标签中就可以实现该效果。

随机文章
一个简单的CSS加载动画 selenium+python自动登录脚本 3D图形学总结(二)—相机坐标转换(欧拉相机) 基于Assimp的骨骼动画实现 Apache+mod_wsgi本地部署Django(Windows系统)
推荐文章