推荐一个纯CSS实现的各种动画加载效果的网站

#推荐一个纯CSS实现的各种动画加载效果的网站| 来源: 网络整理| 查看: 265

CSS Loaders是一个网站，在网上收集了很多加载动画效果的代码，包括动画效果的源代码，方便我们这样的前端开发者使用。

CSS Loaders免费开源说明

CSS Loaders 上所有动画效果的代码都是公开可见的，而且得益于 CSS3 强大的动画支持，实现的代码都很简洁，我们直接复制使用就可以了。

CSS Loaders网站特色

1、收集了超过 500 个 web 动画加载效果，五花八门，几乎覆盖我们所见过的所有动画； 2、所有的动画都是通过 CSS3 来实现，没有一行 JS 代码； 3、所有的动画都只需要一个 dom 元素，开发调用很简单，代码也很简洁。

CSS Loaders使用代码示例： //html代码： //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)} }

进入CSS Loaders官网

【本文地址】

公司简介

联系我们