翼度科技»论坛 编程开发 JavaScript 查看内容

改变用户体验:Whirl动画加载库的无限可能

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
哈喽!欢迎来到程序视点。今天小二哥要分享的不是 Animate.js,也不是 Move.js,而是能提供108种加载动画的库:Whirl.
让加载动画变得丰富多彩!
最省力的加载动画

话不多说,直接来看例子。








以上只是冰山一角。whirl的CSS加载动画集合中有108种选项供你挑选。选中喜欢的动画后,点击“Grab the CSS on Github!”。

将跳转到Github页面,直接获取 CSS 样式,拷贝到自己的样式文件中使用即可。
  1. @-webkit-keyframes spin {
  2.   to {
  3.     -webkit-transform: rotate(360deg);
  4.             transform: rotate(360deg); } }
  5. @keyframes spin {
  6.   to {
  7.     -webkit-transform: rotate(360deg);
  8.             transform: rotate(360deg); } }
  9. /**
  10.   * Ring of stars
  11.   *
  12.   * @author jh3y
  13. */
  14. .ring-of-stars {
  15.   -webkit-animation: spin 1.25s infinite linear;
  16.           animation: spin 1.25s infinite linear;
  17.   height: 50px;
  18.   position: relative;
  19.   width: 50px; }
  20.   .ring-of-stars div {
  21.     border-bottom: 9.6px solid var(--primary);
  22.     border-left: 3.2px solid transparent;
  23.     border-right: 3.2px solid transparent;
  24.     height: 0;
  25.     position: relative;
  26.     width: 0;
  27.     left: 50%;
  28.     position: absolute;
  29.     top: 50%;
  30.     -webkit-transform-origin: center 9.6px;
  31.             transform-origin: center 9.6px; }
  32.     .ring-of-stars div:after, .ring-of-stars div:before {
  33.       border-bottom: 6.4px solid var(--primary);
  34.       border-left: 9.6px solid transparent;
  35.       border-right: 9.6px solid transparent;
  36.       content: '';
  37.       display: block;
  38.       height: 0;
  39.       position: absolute;
  40.       width: 0; }
  41.     .ring-of-stars div:after {
  42.       -webkit-transform: translate(-9.6px, 6.4px) rotate(-35deg);
  43.               transform: translate(-9.6px, 6.4px) rotate(-35deg); }
  44.     .ring-of-stars div:before {
  45.       -webkit-transform: translate(-9.6px, 6.4px) rotate(35deg);
  46.               transform: translate(-9.6px, 6.4px) rotate(35deg); }
  47.     .ring-of-stars div:nth-child(1) {
  48.       -webkit-transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%);
  49.               transform: translate(-50%, -9.6px) rotate(51.42857deg) translate(0, 400%); }
  50.     .ring-of-stars div:nth-child(2) {
  51.       -webkit-transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%);
  52.               transform: translate(-50%, -9.6px) rotate(102.85714deg) translate(0, 400%); }
  53.     .ring-of-stars div:nth-child(3) {
  54.       -webkit-transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%);
  55.               transform: translate(-50%, -9.6px) rotate(154.28571deg) translate(0, 400%); }
  56.     .ring-of-stars div:nth-child(4) {
  57.       -webkit-transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%);
  58.               transform: translate(-50%, -9.6px) rotate(205.71429deg) translate(0, 400%); }
  59.     .ring-of-stars div:nth-child(5) {
  60.       -webkit-transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%);
  61.               transform: translate(-50%, -9.6px) rotate(257.14286deg) translate(0, 400%); }
  62.     .ring-of-stars div:nth-child(6) {
  63.       -webkit-transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%);
  64.               transform: translate(-50%, -9.6px) rotate(308.57143deg) translate(0, 400%); }
  65.     .ring-of-stars div:nth-child(7) {
  66.       -webkit-transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%);
  67.               transform: translate(-50%, -9.6px) rotate(360deg) translate(0, 400%); }
复制代码
重点注意

大家看到上面的例子中,css样式文件占了很大篇幅了。有小伙伴会问:有没有该CSS的发行版本呢?
答案是:没有。
应为程序的引用越精炼,效率越高。如果为了使用一个加载动画,就去引入一整个文件,有点得不偿失。
还有就是考虑:更方便的修改。
前例中的加载效果其实没有占用多少样式,占用篇幅最多的是五角星这个形状和各自的定位。如果你把五角星改为圆点那就简单多了。


这款加载动画的小工具,可以直接使用,也可以以此为模板,从中获取灵感,改变和做你想做的事情
来源:https://www.cnblogs.com/tanggoahead/p/17439564.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具