每日计划-html+css作品：一个加载动画

浏览数：24 / 时间：2015年06月09日

 动画挺简单，关键是渐隐渐现的次序及时间

那个缩放可以去掉的，懒得调了...

<style>
        #show {
          height : 140px;
          width : 150px;
          margin:auto;
          margin-top:45%;
          transform: scale(2,2)
        }
        
        #load {font-family : Arial; text-align : center; padding-top:20px; }
        .t{
             height:30px;
              width:30px;
             float:left;
             background-color:black;
             opacity : 0;
             animation : transform 4s infinite;
             position:absolute;
            }
        #transform{margin-top:30px; width:100%; position:relative; }
        #t1 { left:20px;}
        #t2 {left:60px; animation-delay : 0.5s;}
        #t3 {left:100px; animation-delay : 1s;}
        
        @keyframes transform {
          0% { opacity : 0;}
          20% { opacity : 1;}
          40% { opacity : 0;}
          60% { opacity : 0;}
          80% { opacity : 1;}
          100% { opacity : 0;}
        }

</style>

<div id="show">
    <div id="load">
        loading...
      </div>
  <div id="transform">
      <div class="t" id="t1">&nbsp;</div>
    <div class="t" id="t2"></div>
    <div class="t" id="t3"></div>
</div>

 

loading...
 
 
 

每日计划-html+css作品：一个加载动画,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class java 代码 html style src class java 代码 html style src

相关文章

随机文章

您可能还喜欢

您可能还喜欢