1. IT柚子首页
  2. 前端技术

CSS-Spinners 时尚好看的加载动画效果(CSS)

今天分享一个非常不错的CSS加载效果:css-spinners。官方给出了很多做好的效果,花形、心形、指针、圆形旋转、进度条以及常见的菊花等加载图案。

css-spinners 不仅是轻量级以外,其使用方法也是非常的简单,官方教程也还挺全面的。

使用方法

1、下载CSS及引入CSS文件

css-spinners 有很多效果,而官方也针对每个效果都做了独立的css文件(减少多余css提高速度)。

比如我们想使用心形的效果就可以直接加载下面的这个css,其它的效果点击首页的相关效果就可以到详细页面,右边就可以看到相对应的css地址

这个是给出的在线地址,可以下载到本地。

如果我们想引用全部的css也可以直接引用下面的这个css。

一般建议加载单个就可以了,这样可以减少多余css从而提高速度

2、编写HTML代码

html也很简单,设置相对应的class样式就可以了。

点击首页的效果就可以到详细页面,页面右边有class样式的名称和相对应的css地址

相关下载

官方演示地址:http://www.css-spinners.com/

下载地址:https://github.com/jlong/css-spinners

发布者:柚子,转转请注明出处:https://ityouzi.com/archives/css-spinners.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注