CSS 工具

Font-Awesome

这个 70K Star 的开源项目是一个 CSS、SVG、字体的工具箱。在这里你可以找到你任何想要的可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式，已经被数百万设计师、开发者使用。

开源地址：https://github.com/FortAwesome/Font-Awesome

Animate.css

相信每一位前端工程师在写动画的时候，都会想到去 GitHub 上去看看有没有现成的轮子可用。开源项目 Animate.css 算的上是 GitHub 山最受欢迎的 CSS 动画库。

Animate.css 支持所有主流的浏览器和操作系统，如今已经 75K 的 Star，大多数动画效果你只需要简单的两行代码就能完成，比如弹跳、淡入淡出、抖动、闪现等等。

开源地址:https://github.com/animate-css/animate.css

normalize.css

如果想让不同的浏览器在渲染网页元素的时候形式更统一，Normalize.css 是一个不错的选择，这个开源项目在 GitHub 上斩获 48.5k 的 Star。

相比于传统的 CSS reset，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。

开源地址：https://github.com/necolas/normalize.css

帮你提高 CSS 技巧

这个获得 22.7K 的 Star 的开源项目，可以帮助你提高 CSS 技能的一系列技巧。包括 Flex 布局、SVG 图标、:empty 的用法、选择器小技巧、布局技巧等等。

开源地址：https://github.com/AllThingsSmitty/css-protips

CSS 奇技淫巧

这个由 @chokcoco 开源的项目记录了 CSS 容易忽视的技巧和细节。这是一系列的文章，围绕 CSS/Web 动画展开，包含一些有趣的话题，帮助开发者拓宽解决问题的思路。

开源地址：https://github.com/chokcoco/iCSS

css-blocks

CSS 块 (css-blocks.com)

https://www.github.com/linkedin/css-blocks

Keyframes

Keyframes.app

面向开发人员的更多工具

基于浏览器的、移动友好的、实际上是私有的工具，使 CSS 不那么糟糕。

PaperCSS

PaperCSS • the less formal CSS framework (getpapercss.com)

CSS Inspiration—CSS 灵感

chokcoco/CSS-Inspiration: CSS Inspiration，在这里找到写 CSS 的灵感！ (github.com)

csscoco.com/inspiration/#/./init

1、Solar System

地址：https://codepen.io/kowlor/pen/ZYYQoy

哇！如果你对太空场景情有独钟，那么一定会被这个 CSS 实现的太阳系动画所震撼。作为空间学与物理学爱好者，作者参照了太阳系轨道运行的真实时间进行设计，意味着每个行星都有相对地球年的时间，准确的围绕太阳公转。

2、Gradient Background Animation

地址：https://codepen.io/P1N2O/pen/pyBNzX

对于网站性能来说，动画是众人皆知的问题引发者。如果优化不佳，它们会直接影响页面的打开速度。而这个 CSS 实现的漂亮的渐变动画，却相当的轻量，不仅易于编辑，而且支持自定义颜色。

3、Stack Game

地址：https://codepen.io/finnhvman/pen/xJRMJp

实现一款简单的游戏，并不一定需要 JS 的帮助，纯 CSS 也能够创造一款界面漂亮的 Stack 游戏。当然，游戏看似容易，背后的设计并非那么简单。

4、3D Progress Bars

地址：https://codepen.io/rgg/pen/QbRyOq

这是一款漂亮、轻量、易于定制的进度条开源项目。进度条采用 3D 制作，同时拥有清澈的外观，你甚至可以将它们变成迷你 3D 图表！

5、Glitched Text

地址：https://codepen.io/lbebber/pen/ypgql

故障风格的文本总会让人有眼前一亮的感觉，而这个项目就是纯 CSS 实现的故障效果。如果你想为网站增添酷炫的故障效果，那么不妨多了解下。

6、Francine

地址：https://github.com/cyanharlow/purecss-francine

CSS 的能量超乎你想象，你甚至还可以利用它制作出艺术品效果。Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许，你会惊讶 CSS 实现的效果竟能如此逼真。

（这个在之前《18 个你可能不相信的前端炫酷特效，附观赏地址与下载源码》一文中有分享过实现源码，有兴趣的小伙伴可以去下载研究一下，个人觉得还是非常有趣好玩的。）

7、Mobile Phone

地址：https://codepen.io/Wujek_Greg/pen/LmrweG

这个项目与《Francine》有异曲同工之处，它仅使用 CSS 和 HTML 便实现了手机界面效果，而且效果可以同网站照片相媲美。如果你有兴趣，可详细的了解其实现的过程。

8、Map Creator

地址：https://codepen.io/onediv/pen/NrNebj

利用 JS 创造一个简单的 3D 地图？不用那么复杂，纯 CSS 就可以搞定。怎么样，看上去还不错吧！

9、Instagram.css

地址：https://picturepan2.github.io/instagram.css/

想为你的网站添加一些 Instagram 风格的图片滤镜效果？那么，纯 CSS 实现的 Instagram 风格的滤镜库 —— Instagram.css 一定是你的菜。它的灵感来源于 CSSgram。

10、Animated Gradient Ghost Button

地址：https://codepen.io/ARS/pen/vEwEPP

这是一个纯 CSS 实现的渐变幽灵按钮。漂亮的动画和渐变效果，是不是很酷呢？相信，它可以很好的融入到任何网站之中。

11、Devices.css

地址：https://picturepan2.github.io/devices.css/

如果你想在网站增添 iPhone X、iPhone 8 等移动设备用于展示的话，那么一定不要错过 Devices.css. 它是一个使用了纯 CSS 实现主流移动设备的库，并以现代设备为模版。

12、Dynamic Image Colorizing

地址：https://codepen.io/noahblon/pen/ZbjmbK

这是一个很酷的纯 CSS 实现的项目。你只需要通过电脑自带的选色器，就能轻松地更换图像的颜色，来试试吧！

box-shadow 阴影预览及代码生成

可以非常快速的给元素设置 box-shadow 的属性值，水平位移、垂直位移、模糊半径、色值等，还可以随时查看代码。

资源地址：https://www.html.cn/tool/css3Preview/Box-Shadow.html

渐变代码生成器

可快速设置渐变类型、渐变方向、渐变的范围。

资源地址：http://www.internetke.com/jsEffects/2014120803/

渐变配色方案网站

看似和上面的工具有些相似，其实差别很大的。该网站是专门提供渐变色效果的站点，里面接近上百种渐变配色方案，可根据自己风格来选择搭配，能直接获得对应渐变配色的 CSS 代码。

资源地址：https://uigradients.com/#RoyalBlue

动画缓动函数预览+代码生成

选择动画类型，配置动画时长和动作，即刻生成预览和代码。

资源地址：https://xuanfengge.com/easeing/ceaser/

雪碧图合成+代码生成

简单 3 步拿到合成图和代码，这比起自己手写效率要高的多，是个好工具。

上传要合成的图片
选择图片的 padding 值
设置图片组合的方向
下载图片、复制代码

资源地址：https://www.toptal.com/developers/css/sprite-generator

css3 loading 动画效果代码生成器

这是一个专门搞各种加载效果的网站，仅使用（transform 和 opacity）CSS 动画来创建平滑且易于自定义的动画。当然也提供了源码，如果正好需要可以直接复制过来。

html

<div class="spinner"></div>

.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px
auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation:
sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform:
perspective(120px) rotateY(180deg) } 100% { -webkit-transform:
perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane
{ 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

资源地址：https://tobiasahlin.com/spinkit/

纯 CSS 实现标签自动显示超出数量

纯 CSS 实现标签自动显示超出数量 (qq.com)

CSS流光文字效果：打造网页上的霓虹灯效果

先上效果

🌟CSS流光效果，作为一种创新的文字动画技术，能够为网页增添一抹动态的光影，让文字内容更加引人注目。本文将向您展示如何使用CSS来实现这种独特的流光文字效果，让您的网页设计在视觉上脱颖而出，同时提供一种全新的用户体验。

以下是完整代码：

HTML:

html

<p data-text="CSS Animation">CSS Animation </p>

CSS:

css

html, body {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
    display: flex;
}

p {
    position: relative;
    margin: auto;
    font-size: 5rem;
    word-spacing: 0.2em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    background-color: #E8A95B;
    background-clip: text;
}

p::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine 5s infinite linear;
}

@keyframes shine {
    0% {
        background-position: 50% 0;
    }
    100% {
        background-position: -190% 0;
    }
}

入场出厂、文字、背景动画生成器

视频剪辑工具相信大家都用过，可以配置某个视频的入场和出厂动画，以及文字的动画。而这个网站就是专门用 css 来实现这些效果。还有背景图和背景颜色动画。

动画类型设计的非常全面，网站体验很棒，除了可以复制代码外，也是个不错的学习工具。

偷个懒，只放了静态图，有兴趣的一定要打开体验下。

资源地址：https://animista.net/play/entrances/slide-in-blurred

工作中常用效果总结

网站 1 - You-need-to-know-css

笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档，该项目整理了 CSS 的各种布局以及效果实现，同时提供了完整的实现代码。

目前文档一共包含 43 个 CSS 的小样式（持续更新中）是非常不错的学习资源。

资源地址：https://lhammer.cn/You-need-to-know-css/#/zh-cn/multiple-borders

网站 2 - CSS Tricks

总结一些常用的 CSS 样式，记录一些 CSS 的新属性和一点奇技淫巧，没有废话，代码简单易用，方便复制。

举个栗子：卡券生成器

.hollow-one-circle{ width: 100px; height: 100px; position: relative; background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0) top left/100px 100% no-repeat; }

资源地址：https://qishaoxuan.github.io/css_tricks/

CSS Battle - 在线比拼 CSS

https://cssbattle.dev

在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有 12 个级别，需要你用 HTML 和 CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。

Learn CSS layout - 学习 CSS 布局

http://learnlayout.com

在线 CSS 布局学习，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者掌握好 CSS 的布局知识，改善初学者对 CSS 的编写习惯和正确方法。

Flexbox Froggy - 学习 Flex 布局的小游戏

http://flexboxfroggy.com

一个引导式的学习 Flex 布局的游戏，用 flex 布局让青蛙跳到荷叶上就算完成，游戏里面几乎包含了所有常用的属性，这样学习起来很有趣嘞，形象好记忆，谁要是 Flex 布局还不熟的话，在这多练练。

EnjoyCSS-在线 CSS 代码可视化工具

https://enjoycss.com

在线版的 CSS3 代码生成工具，基于可视化操作，能快速无编码的环境下调整网页效果和图形样式。就像是在本地使用 PS 或 AI 软件一样。

CSS-Tricks - CSS 技巧

https://css-tricks.com

这个网站不断的在更新一些关于 CSS 的技巧优秀的教程和技巧，每天都会更新文章。

Neumorphism-实现新拟态效果

https://neumorphism.io

可以轻松实现新拟态效果，不仅可以修改颜色或填写色值，也可以修改尺寸、半径、距离、强度、模糊效果以及形状等参数，同时提供了 CSS 代码可以直接 Copy。

uiGradients - 分享渐变色

https://uigradients.com

提供渐变色效果的站点，里面接近上百种渐变配色方案，可根据自己风格来选择搭配，能直接获得对应渐变配色的 CSS 代码。

一、CSS 布局生成器

Layout：https://layout.bradwoods.io/customize

它是一个全功能的 CSS 和 JSX 生成器，用于使用 CSS Grid 布局语法生成不同种类的布局，任意修改 Grid 的属性，并且实时展示画面，生成对应代码。当然还有 Flex 布局（不过现在还不是很完善）

二、Riju

Riju：https://riju.codes/

Riju 是一个继承了 224 种语言的在线代码运行平台，十分简洁，无广告，非常推荐

三、Whirl

Whirl：https://whirl.netlify.app/

Whirl 是一个 CSS 动画库，与其它的动画库不一样，它集合了 108 种加载动画，简洁且独特，值得学习，所有的源代码也都能获取到！

四、Pikaday

Pikaday：https://pikaday.com/

Pikaday 是一个日期选择器，无依赖、轻量（5k）、CSS 模块化，样式也很简约，我特别喜欢，令人意外的是，它在 Github 上竟然斩获了 7k+ Star

五、Tailwind Components

Tailwind Components：https://tailwindcomponents.com/

Tailwind Components 是一个 Tailwind UI 套件，这个网站是一个由社区贡献的各种 Tailwind 组件

六、Tail-Kit

Tail-Kit：https://www.tailwind-kit.com/

Tail-Kit 是第一个非常棒的 Tailwind UI 组件库，它有超过 250 个开源组件，同时兼容 React、 Vue 和 Angular

十、Layout patterns

Layout patterns：https://web.dev/patterns/layout/

Layout patterns 是 Google Developers 旗下开发者资源中新增的版块，里面列举了使用 CSS 构建布局 UI，现在列举了 11 种布局~ 后续应该还会持续增加，探索更多可能，建议收藏

十一、Lowdefy

Lowdefy：https://lowdefy.com/

Lowdefy 是一个开源的低代码框架，通过 YAML 来轻松构建 web 应用、管理面板、 BI 仪表板、工作流和 CRUD 应用

十三、fetoolkit

fetoolkit：https://www.fetoolkit.io/

fetoolkit 是一个前端开发工具箱，收录了 20 多种编码、图片相关的工具，包括 CSS、 JSON、图标、 SVG、图像压缩、 npm、 regex 等工具

十四、Unicode Arrows

Unicode Arrows：https://unicodearrows.com/

Unicode Arrows 是一个收录了各式各样的箭头相关的十六进制代码

十五、components AI

components AI：https://components.ai/

components AI 是一个主题构建器，包括语法高亮生成器、渐变、阴影工具、SVG 图案生成器、动画背景等等，全部都可以在线调试，非常好用

十六、Glitter

Glitter：https://wh0.github.io/glitter/

Glitter 是一个荧光字体生成器，项目不复杂，但很好看，我们可以随意修改文本，最后导出 SVG

十七、Iconduck

Iconduck：https://iconduck.com/

Iconduck 是一个开源 icon 网站，拥有超过 100,000 个图标，可以通过关键字搜索，并且都可以在商业项目中使用

十八、pattern-generator

pattern-generator：https://doodad.dev/pattern-generator/

pattern-generator 是一个帮助你生成背景图片的网站，就几十种图案可选，而且每种图案里的元素都可以通过交互按钮任意修改，最后可以导出 JPEG、 PNG、SVG 、CSS 背景代码，也支持退出后恢复上一次操作的内容

十九、buttons-generator

buttons-generator：https://markodenic.com/tools/buttons-generator/

buttons-generator 是一个包含了很多种交互形式以及样式的按钮的网站，大概有**120+**种，对于有自定义按钮需求的小伙伴可以作参考

二十、Coding Fonts

Coding Fonts：https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark

Coding Fonts 是收集了 45 种代码字体的网站，大部分都是免费的，当然也有收费的，可以选个心仪的放到自己的编辑器里去（小声 bb 一句，我还是最喜欢JetBrains Mono，免费又好看）

二十一、svgrepo

svgrepo：https://www.svgrepo.com/

svgrepo 是一个 SVG 图标库，坐拥 300,000 + 免费使用的 SVG 图标，大部分也都是可以商用的。网站支持搜索，无需登录即可收藏（可能是存的 localstorage）~

![图片](data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1px' height='1px' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0'%3E%3Cg transform='translate(-249.000000, -126.000000)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)

二十一、maplibre

maplibre：https://maplibre.org/

maplibre 是一个 JavaScript 世界地图库，开箱即用，同时也支持了 IOS 和 Android 的 SDK

二十二、Dopefolio

Dopefolio：https://github.com/rammcodes/Dopefolio

Dopefolio 是一个开箱即用的官网页面生成器，没有依赖一堆的三方开源库，全部是纯 HTML、CSS，所以 SEO 做的非常好，Lighthouse 分数也很高，同时支持页面响应式。有官网页面需求的小伙伴可以尝试使用

❤CSS 动画工具网站收集

动画是 Web 和 UI 设计的主要内容。一个完全静止的网站，即使是使用了微妙的悬停状态，也可能感觉不一样。如果缺少动画，就像缺少必要的东西一样。

幸运的是，有很多方法可以为你的网站添加动画。WebGL，JavaScript 甚至 HTML5 都支持或专用于动画。但最容易学习和实现的是 CSS 动画。

Flash 是轻量级动画的另一个来源，易于为网站创建动画。但随着 Flash 最终被弃用，许多设计师正在转向使用其他渠道来实现漂亮的动画效果，从而提升他们的网站效果。

虽然就网络动画效果而言，CSS 动画很容易学习，但它仍然需要花费大量时间来掌握它。它可以真正帮助我们在此期间学习和使用一些示例代码。

今天我们为你收集整理了一些漂亮的 CSS 动画效果素材库。如果你需要在设计中使用一些漂亮的动画，应用在你的网站上，进行快速测试这些代码，或者想要从提供的代码片段中学习，你一定会喜欢这些动画集。

1、CSSFX

地址：https://cssfx.dev/

CSSFX 里的动画效果非常精美简单而干净，里面有数十种小而美的动画。它提供了许多有趣的加载动画和相当多的悬停状态。你只需点击一下你喜欢的动画效果，然后，就可以直接复制这个效果的代码，并将其应用到你的网站项目中，当然，你还可以亲自了解他们是如何实现这些动画效果的。

2、Animista

地址：http://animista.net/

如果你需要定制更多个性化的动画的话，而 Animista 是一个不错的选择，它提供了近 20 种类型的 CSS 动画可供你浏览参考使用。每种动画都提供了大量的额外设置，你可以根据自己的喜好进行更改设置。然后添加保存到收藏夹里，最后单击生成按钮以获取此动画效果的代码。

【杨小二注】：这个里面除了一些基础的动画外，Animista 还提供了背景动画，按钮跳动动画，文本动画等各种动画效果，如果你也热爱 CSS，喜欢研究新动画的话，建议你亲自去试一试。

3、Epic Spinners

地址：https://epic-spinners.epicmax.co/

这个网站里有一些精致的动画效果，它们看起来很有趣，并且它可以让用户对页面加载所需的几秒钟感兴趣，不至于那么无聊，当然，它们或许只是制作精美的页面装饰元素！在这里，你只要单击一下你喜欢的动画效果，你就可以查看其代码，这些动画效果是采用了 Vue.js 一起实现的。

4、缓动函数速查表

地址：https://easings.net/

缓动函数解释了动画如何在整个运动帧中加速和减速。这样动画就可以通过线性，平滑地移动，甚至可以来回快速反弹。

如果没有任何宽松的线性动画通常很无趣。使用缓动函数功能查表可以轻松创建独特而流畅的缓动动画效果。

【杨小二注】Easing functions：缓动函数，指定参数随时间的变化率。

因为在我们的现实生活中，物体不会立即启动或停止，也不会以恒定速度移动，都是有一个速度变化的过程。关于这些速度变化的过程，大家可以自己观察体验一下，像物体下落，或者物体左右移动等等，其实，我们在做实现各种动画效果的时候，基本实例都是源自我们的生活。

而缓动函数，最常见的应用就是动画，用来指定动画效果在执行时的变化速度，使其看起来更加真实。除了动画之外，还有很多场景需要用到缓动函数，如实现一个非线性的 slider，有兴趣的小伙伴，可以自行研究学习一下。

5、Transformicons

地址：http://www.transformicons.com/builder.html

Transformicons 是在单击时在状态之间切换的图标。还包括一些额外的图标，如加载条和滚动指示器。只需单击即可查看正在运行的图标的预览，并切换以选择要为其构建代码的图标。

这些 CSS 图标确实使用了一些 JavaScript，但它只有几行。干净的动画按钮非常值得。

css-loaders

在线：https://css-loaders.com/spinner/

这个网站里面效果更多，而且还做了分类，很好用

随便找了一个，顺便看了下复制出来的 css，这几行就能写出来 3D 加载的效果。

20 在线加载动画

以下 20 个加载动画，均来自 CodePen。

1、CSS loader

源码地址：http://codepen.io/CKH4/pen/ZGNyep/

作者：@CKH4

这是一个利用 Slim+CSS 预处理器 Stylus 实现的简单动画。作者写代码很精炼、简洁。

2、Rainbow Loader

源码地址：http://codepen.io/jackrugile/pen/JddmaX/

作者：@jackrugile

为客户端改良的纯 CSS 实现的彩虹加载动画。

3、Redirecting Loader

源码地址：http://codepen.io/mr_alien/pen/FDLjg/ 作者：@mr_alien

为了将用户重新定向到另一个页面，而利用 HTML+CSS 实现的加载动画。

4、Loader CSS

源码地址：http://codepen.io/mattiabericchia/pen/azNyBo/

作者：@mattiabericchia

纯 CSS 实现的循环加载动画。

5、Light Loader

源码地址：http://codepen.io/jackrugile/pen/BlDjk/

作者：@jackrugile

CSS+JS 实现的艳丽火花效果的 Canvas 加载动画。

6、CSS3 Infinite Loader

源码地址：http://codepen.io/jonathansilva/pen/GhkAI/

作者：@jonathansilva

用 CSS3 和 Html 制作的无限加载动画。

7、CSS Stairs Loader

源码地址：http://codepen.io/ispal/pen/mVaaJe/

作者：@ispal

纯 CSS 实现的楼梯循环加载动画。

8、CSS Loader

源码地址：http://codepen.io/code_dependant/pen/bjFgq/

作者：@code_dependant

Haml+Sass 实现的循环加载动画。

9、Loader

源码地址：http://codepen.io/majci23/pen/NqdXvy/

作者：@majci23

纯 CSS 实现的循环加载动画。

10、Rubik loader

源码地址：http://codepen.io/FilipVitas/pen/aNLgZz/

作者：@FilipVitas

HTML +Sass 实现的魔方加载动画。

11、CSS3 Loader Animation &ndash Peeek

源码地址：http://codepen.io/rss/pen/lKBaJ/

作者：@rss

由 Mikael Edwards 设计并由 RızaSelçukSaydam 为 Peeek 开发的加载动画。利用 Haml + SCSS 实现的。

12、Pure Css Loader &ndash Square

源码地址：http://codepen.io/dghez/pen/Czuqn/

作者：@dghez

纯 SCSS 实现的正方形加载动画。

13、Cocktail Loader

源码地址：http://codepen.io/MarcMalignan/pen/svLux/

作者：@MarcMalignan

利用 CSS 与少量的 jQuery 实现的鸡尾酒加载动画。

14、Loader a Day (day 2)

源码地址：http://codepen.io/TheDutchCoder/pen/mgswv/

作者：@TheDutchCoder

灵感启发！一个纯 CSS 实现的 iMac/iPad/iPhone 变换加载动画。

15、Polygon Loader

源码地址：http://codepen.io/dan_reid/pen/rwhDf/

作者：@dan_reid

受到 polygon.com 网站启发制作的加载动画，利用 Haml+SCSS 实现的。

16、Code Loader in CSS

源码地址：http://codepen.io/depy/pen/Gqtwv/

作者：@depy

一款纯 CSS 加载动画，创意还是蛮有意思的。

17、One element four color loader

源码地址：http://codepen.io/tstoik/pen/Ywgxqb/

作者：@tstoik

利用 SCSS 写的很酷的加载动画。

18、Loader #1

源码地址：http://codepen.io/samueljweb/pen/LbGxi/

作者：@samueljweb

利用棍状图形实现的加载动画。

19、Let’s load stuff

源码地址：http://codepen.io/tomchewitt/pen/yNdQrO/

作者：@tomchewitt

纯 CSS 实现的有趣的加载动画。

20、Another Loading Animation

源码地址：http://codepen.io/redouglas/pen/vCgwc/

作者：@redouglas

一个简单的旋转加载动画。

纯 CSS 实现十个 Loading 效果

为保证运行正常，咱先规定下

css

* {
  box-sizing: border-box;
}

平滑加载

html

<div class="progress-1"></div>

.progress-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p1 2s infinite linear;
}
@keyframes p1 {
    100% {background-size:100%}
}

按步加载


<div class="progress-2"></div>
.progress-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   linear-gradient(orange 0 0) 0/0% no-repeat
   lightblue;
  animation:p2 2s infinite steps(10);
}
@keyframes p2 {
    100% {background-size:110%}
}

条纹加载

html


<div class="progress-3"></div>
.progress-3 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat,
   repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;
  animation:p3 2s infinite;
}
@keyframes p3 {
    100% {background-size:100%}
}

虚线加载

html

<div class="progress-4"></div>
.progress-4 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p4 2s infinite steps(6);
}
@keyframes p4 {
    100% {background-size:120%}
}

电池加载

html


<div class="progress-5"></div>
.progress-5 {
  width:80px;
  height:40px;
  border:2px solid #000;
  padding:3px;
  background:
    repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px)
    0/0% no-repeat content-box content-box;
  position: relative;
  animation:p5 2s infinite steps(6);
}
.progress-5::before {
  content:"";
  position: absolute;
  top: 50%;
  left:100%;
  transform: translateY(-50%);
  width:10px;
  height: 10px;
  border: 2px solid #000;
}
@keyframes p5 {
    100% {background-size:120%}
}
.progress-5::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        #0000 calc(50% - 7px),#000 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),#000 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(#000 calc(50% - 5px),#0000 0 calc(50% + 5px),#000 0) left /2px 100%,
    linear-gradient(#0000 calc(50% - 5px),#000 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}

内嵌加载


<div class="progress-6"></div>
.progress-6 {
  width:120px;
  height:22px;
  border-radius: 20px;
  color: #514b82;
  border:2px solid;
  position: relative;
}
.progress-6::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background: #514b82;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}

珠链加载

html

<div class="progress-7"></div>
.progress-7 {
  width:120px;
  height:24px;
  -webkit-mask:
    radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
   linear-gradient(#25b09b 0 0) 0/0% no-repeat
   #ddd;
  animation:p7 2s infinite linear;
}
@keyframes p7 {
    100% {background-size:100%}
}

斑马线加载

html


<div class="progress-8"></div>
.progress-8 {
  width:60px;
  height:60px;
  border-radius: 50%;
  -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
  background:
   linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat
   #ddd;
  animation:p8 2s infinite steps(7);
}
@keyframes p8 {
    100% {background-size:100% 115%}
}

水柱加载

html


<div class="progress-9"></div>
.progress-9 {
  --r1: 154%;
  --r2: 68.5%;
  width:60px;
  height:60px;
  border-radius: 50%;
  background:
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left,
    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center,
    radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right,
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat:no-repeat;
  animation:p9 2s infinite linear;
}
@keyframes p9 {
    33% {background-position: 0% 33% ,100% 33% ,200% 33% }
    66% {background-position: -100% 66%,0% 66% ,100% 66% }
    100% {background-position: 0% 100%,100% 100%,200% 100%}
}

信号加载

html


<div class="progress-10"></div>
.progress-10 {
  width:120px;
  height:60px;
  border-radius:200px 200px 0 0;
  -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
   #ddd;
  animation:p10 2s infinite steps(6);
}
@keyframes p10 {
    100% {background-size:120% 120%}
}

CSS 工具 ​

Font-Awesome ​

Animate.css ​

normalize.css ​

帮你提高 CSS 技巧 ​

CSS 奇技淫巧 ​

css-blocks ​

Keyframes ​

面向开发人员的更多工具 ​

PaperCSS ​

CSS Inspiration—CSS 灵感 ​

1、Solar System ​

2、Gradient Background Animation ​

3、Stack Game ​

4、3D Progress Bars ​

5、Glitched Text ​

6、Francine ​

7、Mobile Phone ​

8、Map Creator ​

9、Instagram.css ​

10、Animated Gradient Ghost Button ​

11、Devices.css ​

12、Dynamic Image Colorizing ​

box-shadow 阴影预览及代码生成 ​

CSS 工具

Font-Awesome

Animate.css

normalize.css

帮你提高 CSS 技巧

CSS 奇技淫巧

css-blocks

Keyframes

面向开发人员的更多工具

PaperCSS

CSS Inspiration—CSS 灵感

1、Solar System

2、Gradient Background Animation

3、Stack Game

4、3D Progress Bars

5、Glitched Text

6、Francine

7、Mobile Phone

8、Map Creator

9、Instagram.css

10、Animated Gradient Ghost Button

11、Devices.css

12、Dynamic Image Colorizing

box-shadow 阴影预览及代码生成