CSS图书馆 » HTML & CSS » 纯 CSS + 纯字符实现的 loading 加载效果

纯 CSS + 纯字符实现的 loading 加载效果

发表于: HTML & CSS. 评论
赞助商链接

等待加载、加载中的在网页上是很常用的元素,实现方式也很多,其中直接用 GIF 动画、CSS sprites 等,而今天介绍的就是以纯 CSS + 纯字符实现的 loading加载效果,样式超级多,可选择一款应用到你的网页项目上吧。

项目名称:text spinners
项目地址:http://tawian.io/text-spinners/

特色

  • 纯 CSS + 纯字符实现
  • 可以替换成自己喜欢的字符

使用教程

这是通过 CSS 和结合文字字符来实现的逐帧动画,所以通过改变 font-family 字体,字符的样式也会有所改变,同时大家也可以修改 CSS 文件,去更换你想要的字符。

STEP 1: 引入 CSS 代码文件

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

STEP 2:给HTML 标签添加对应的 class 样式,参考:

<span class="loading dots"></span>

样式预览

我们截图了一部分预览样式,具体 DEMO 建议到官方查看。


 

 

 

 

完整视图:

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。