用css3实现打点效果实例讲解

互联网 17-7-19

基于box-shadow实现的打点效果

理论上，box-shadow可以实现任意的图形效果，自然我们可以利用box-shadow生成我们的点效果，然后通过animation控制不同时间点点的数目就可以实现点点点... loading效果了~

XML/HTML Code复制内容到剪贴板

订单提交中<span class="dotting"></span>

上面代码这个类名为dotting的span就是我们所有的玄机所在，页面任意地方，只要有这一小撮HTML就可以有打点动画，与文字混排良好，且颜色自动匹配。例如，本文“标题一”和“标题二”后面的点点点动画就是添加了这么点HTML.

下面是万众瞩目的CSS代码了：

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <meta name="author" content="http://www.softwhy.com/" />  <title>蚂蚁部落</title>  <style>  dot {    display:inline-block;     width:3ch;    text-indent:-1ch;    vertical-align:bottom;     overflow:hidden;    animation:dot 3s infinite step-start both;  }  @keyframes dot {    33% { text-indent: 0; }    66% { text-indent: -2ch; }  }  </style>  </head>  <body>  <a href="javascript:">提交进行中<dot>...</dot></a>  </body>  </html>

以上就是用css3实现打点效果实例讲解的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css