欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML5 >

css3 oading动画提交效果

 

<!DOCTYPE html>

<html lang="en">

<head>

         <meta charset="UTF-8">

         <title> css3 oading动画提交效果</title>

         <style>

                   body{text-align: center}

                   .grebtn{

                            display: inline-block;

                       padding: 0.5em 1.25em;

                       border: 1px solid;

                       border-radius: 2px;

                       vertical-align: bottom;

                       font-weight: inherit;

                       border-color: #208000 #1F7F00;

                       background-color: #289600;

                       box-shadow: inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62;

                       color: #fff;

                       text-shadow: 0 -1px #137900;

                       margin: 100px auto;

                   }

                   dot {

                       display: inline-block;

                       height: 1em; line-height: 1;

                       text-align: left;

                       vertical-align: -.25em;

                       overflow: hidden;

                   }

                   dot::before {

                       display: block;

                       content: '...\A..\A.';

                       white-space: pre-wrap;

                       animation: dot 3s infinite step-start both;

                   }

                   @keyframes dot {

                       33% { transform: translateY(-2em); }

                       66% { transform: translateY(-1em); }

                   }

         </style>

</head>

<body>

 

         <!-- 代码部分begin -->

         <div class="grebtn">订单提交中<dot>...</dot></div>

         <!-- 代码部分end -->

        

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h17012.shtml

我要分享到:
上一篇:学习HTML5的一些新特性
下一篇:没有了

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-01-08 17:53 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。