只需一个元素:CSS-Loaders帮你轻松实现的各种动画加载效果~
CSS Loaders简介:
CSS Loaders 是一个收集了互联网上很多加载动画效果代码的网站,其中包含了动画效果的源代码,方便像我们这样的前端开发者来使用。
自从 CSS3 的动画属性得到主流浏览器的支持以后,我们经常看到使用 CSS 实现的各种加载动画效果,而这个网站就专门收集并且分类整理这些动画效果,无论是学习或者是查阅,甚至是二次修改来实现定制的需求,都能很好地满足我。
网站特色
- 收集了超过 500 个 web 动画加载效果,五花八门,几乎覆盖我们所见过的所有动画;
- 所有的动画都是通过 CSS3 来实现,没有一行 JS 代码;
- 所有的动画都只需要一个 dom 元素,开发调用很简单,代码也很简洁。
CSS 动画实现的 loading 有什么优势?
以前常规的动画加载效果是做一张 gif 格式的动图,需要加载时显示图片,加载完成后隐藏图片。这种原始的方式有几个缺点:
- 动图占用空间大,而且很难压缩;
- 显示效果不好,特别是在手机这种高清屏幕上,往往都会模糊;
- 透明像素会有白边,在非纯色背景上显示很糟糕;
- 图片确定后不能修改,如要要改变颜色、播放速度,需要重新制作。
这就是 gif 动图的弊端,相反,CSS 实现的加载效果,不仅动画流畅,还可以根据需要改变颜色和播放速度等,关键是占用空间很小。所以越来越多的开发者和设计师在前期规划时,都会优先考虑 CSS 动画来实现。
CSS Loaders 已经帮我们把非常多的加载效果都整理好了,是一个非常好用的加载动画预览和文档网站。
开发上手
CSS Loaders 主页是一个随机的动画效果,显示了该动画的 dom 结构代码,非常简洁:
<div class="loader"></div>
所有的动画效果都是这个结构,然后我们鼠标悬停在动画上,就会显示「copy the css」按钮,点击就会复制这个 loader 的所有样式,粘贴到我们的项目 css 中,动画就生效了,使用非常简单。比如常见的圆圈加载动画的 CSS 源码:
.loader { width: 50px; aspect-ratio: 1; border-radius: 50%; border: 8px solid #514b82; animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear; } @keyframes l20-1{ 0% {clip-path: polygon(50% 50%,0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0% )} 12.5% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0% )} 25% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100% )} 50% {clip-path: polygon(50% 50%,0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )} 62.5% {clip-path: polygon(50% 50%,100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100% )} 75% {clip-path: polygon(50% 50%,100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100% )} 100% {clip-path: polygon(50% 50%,50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100% )} } @keyframes l20-2{ 0% {transform:scaleY(1) rotate(0deg)} 49.99%{transform:scaleY(1) rotate(135deg)} 50% {transform:scaleY(-1) rotate(0deg)} 100% {transform:scaleY(-1) rotate(-135deg)} }
如果需要多个动画效果,我们可以直接修改 .loader
这个 className,让不同的动画效果对应自己的 CSS,这是很基础的 CSS 语法,这里就不展开说了。
网站的左边做了不同动画类型的分类,我们可以点击切换去查阅。
免费开源说明
CSS Loaders 上所有动画效果的代码都是公开可见的,而且得益于 CSS3 强大的动画支持,实现的代码都很简洁,我们直接复制使用就可以了…
本站采用署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)许可协议授权。
本站坚持“不能用的源码发出去都是浪费大家时间“,付费源码都是亲测的
源码已测试,但不保证完美无bug!站长是一位10年老技术,所有会员都可以免费咨询,在线指导提供运营建议!交个朋友~
洽单资源库仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,请联系客服予以删除。
洽单资源库 » 只需一个元素:CSS-Loaders帮你轻松实现的各种动画加载效果~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 洽单资源库