CSS 工具
大约 2 分钟
提示
导航数据完善中,欢迎 👏👏 通过 PR 或者下方评论的形式提供其他未收集的站点。 站点图标可以放到 websites 目录下
CSS 工具
![Sass](/assets/sass-CvEkv1WO.jpg)
Sass
Sass 是成熟、稳定、强大的 CSS 扩展语言。
Less
Less(Leaner Style Sheets 的缩写)是一门向后兼容的 CSS 扩展语言。
![Stylus](/assets/stylus-CuGp1Ufc.png)
Stylus
富于表现力、动态的、健壮的 CSS。
![CSS-Tricks](/assets/css-tricks-CHqYLvR7.png)
CSS-Tricks
一个关于运用CSS技术进行网络开发和设计的小技巧的交流网站。
![CSS三角形生成器](/assets/css-triangle-generator-CRpHGUw0.gif)
CSS三角形生成器
定义几个参数很方便的生成纯css代码的各种三角形。
Customize Border
自定义 CSS Border 边框。
![FANCY-BORDER-RADIUS](/assets/fancy-border-radius-BOgFYSMZ.png)
FANCY-BORDER-RADIUS
生成花里胡哨的Border圆角样式。
![贝塞尔曲线](/assets/cubic-bezier-C9DM0pQx.png)
贝塞尔曲线
拖拽方式生成贝塞尔曲线参数。
![缓动函数速查表](/assets/easings-46lvBih4.png)
缓动函数速查表
缓动函数速查表。
Grabient
CSS 代码渐变颜色生成工具。
![Fresh Background Gradients](/assets/webgradients-eJaNyex7.png)
Fresh Background Gradients
CSS 个性渐变背景集合。
Fresh Background Gradients
创建各样的 CSS 加载动画。
![Codemyui](/assets/codemyui-swGh78AD.webp)
Codemyui
非常酷的网站,有一堆很酷的 CSS、HTML 和 Javascript 片段。
Smooth Shadow
一款设置漂亮阴影的工具。
![Box Shadow](/assets/box-shadow.art-BtN4o-1r.png)
Box Shadow
提供各种阴影样式。
Color Hunt
非常受欢迎的配色网站,提供了大量的精选颜色方案。
![Glass Morphism](/assets/glassgenerator-2yuREyPK.png)
Glass Morphism
在线CSS毛玻璃风格工具。
![Keyframes](/assets/keyframes-5va5hV5N.png)
Keyframes
在线动画、阴影和颜色。
![BGJar](/assets/bgjar--AlCpd9U.png)
BGJar
一个免费的在线背景生成器,提供了各种类型和风格的背景图像。
![SVG Chart Generator](/assets/magicpattern-CSG5BfYx.png)
SVG Chart Generator
一款设计精美的图表生成器,生成基于 SVG 的折线或条形格式的图表。
![Ribbon Shapes](/assets/css-loaders-DnRpzM7s.png)
Ribbon Shapes
一个纯 CSS 丝带的在线画廊。
![CSS Generators](/assets/css-loaders-DnRpzM7s.png)
CSS Generators
CSS 生成器的一个小集合。
![Accessible Color Palette Generator](/assets/venngage-DmLzM9Fi.png)
Accessible Color Palette Generator
一款调色板生成器。
- icon: '@websites/sass.jpg'
name: Sass
desc: Sass 是成熟、稳定、强大的 CSS 扩展语言。
link: https://sass.bootcss.com/documentation
- icon: '@websites/less.ico'
name: Less
desc: Less(Leaner Style Sheets 的缩写)是一门向后兼容的 CSS 扩展语言。
link: https://less.bootcss.com/
- icon: '@websites/stylus.png'
name: Stylus
desc: 富于表现力、动态的、健壮的 CSS。
link: https://stylus-lang.com/
- icon: '@websites/css-tricks.png'
name: CSS-Tricks
desc: 一个关于运用CSS技术进行网络开发和设计的小技巧的交流网站。
link: https://css-tricks.com/
- icon: '@websites/css-triangle-generator.gif'
name: CSS三角形生成器
desc: 定义几个参数很方便的生成纯css代码的各种三角形。
link: http://apps.eky.hk/css-triangle-generator/zh-hant
- icon: '@websites/dashed-border-generator.ico'
name: Customize Border
desc: 自定义 CSS Border 边框。
link: https://kovart.github.io/dashed-border-generator/
- icon: '@websites/fancy-border-radius.png'
name: FANCY-BORDER-RADIUS
desc: 生成花里胡哨的Border圆角样式。
link: https://9elements.github.io/fancy-border-radius/
- icon: '@websites/cubic-bezier.png'
name: 贝塞尔曲线
desc: 拖拽方式生成贝塞尔曲线参数。
link: https://cubic-bezier.com/
- icon: '@websites/easings.png'
name: 缓动函数速查表
desc: 缓动函数速查表。
link: https://easings.net/zh-cn
- icon: '@websites/grabient.ico'
name: Grabient
desc: CSS 代码渐变颜色生成工具。
link: https://www.grabient.com/
- icon: '@websites/webgradients.png'
name: Fresh Background Gradients
desc: CSS 个性渐变背景集合。
link: https://webgradients.com/
- icon: '@websites/whirl.ico'
name: Fresh Background Gradients
desc: 创建各样的 CSS 加载动画。
link: https://whirl.netlify.app/
- icon: '@websites/codemyui.webp'
name: Codemyui
desc: 非常酷的网站,有一堆很酷的 CSS、HTML 和 Javascript 片段。
link: https://codemyui.com/
- icon: '@websites/shadows.brumm.af.svg'
name: Smooth Shadow
desc: 一款设置漂亮阴影的工具。
link: https://shadows.brumm.af/
- icon: '@websites/box-shadow.art.png'
name: Box Shadow
desc: 提供各种阴影样式。
link: https://box-shadow.art/
- icon: '@websites/colorhunt.svg'
name: Color Hunt
desc: 非常受欢迎的配色网站,提供了大量的精选颜色方案。
link: https://colorhunt.co/
- icon: '@websites/glassgenerator.png'
name: Glass Morphism
desc: 在线CSS毛玻璃风格工具。
link: https://glassgenerator.netlify.app/
- icon: '@websites/keyframes.png'
name: Keyframes
desc: 在线动画、阴影和颜色。
link: https://keyframes.app/
- icon: '@websites/bgjar.png'
name: BGJar
desc: 一个免费的在线背景生成器,提供了各种类型和风格的背景图像。
link: https://bgjar.com/
- icon: '@websites/magicpattern.png'
name: SVG Chart Generator
desc: 一款设计精美的图表生成器,生成基于 SVG 的折线或条形格式的图表。
link: https://www.magicpattern.design/tools/svg-chart-generator
- icon: '@websites/ribbon-shapes.png'
name: Ribbon Shapes
desc: 一个纯 CSS 丝带的在线画廊。
link: https://css-generators.com/ribbon-shapes/
- icon: '@websites/ribbon-shapes.png'
name: CSS Generators
desc: CSS 生成器的一个小集合。
link: https://css-generators.com/
- icon: '@websites/venngage.png'
name: Accessible Color Palette Generator
desc: 一款调色板生成器。
link: https://venngage.com/tools/accessible-color-palette-generator
Loading/动画
![Animista](/assets/animista-WHbpfvpY.jpg)
Animista
一个可自定义的 CSS 动画库工具
CSS Load
纯 CSS 生成各种 Loading 加载动画。
![CSS Loaders](/assets/css-loaders-DnRpzM7s.png)
CSS Loaders
包含 30 多个类别下的 600 多个 CSS 加载动画。
- icon: '@websites/animista.jpg'
name: Animista
desc: 一个可自定义的 CSS 动画库工具
link: https://animista.net/
- icon: '@websites/cssload.ico'
name: CSS Load
desc: 纯 CSS 生成各种 Loading 加载动画。
link: https://cssload.net/
- icon: '@websites/css-loaders.png'
name: CSS Loaders
desc: 包含 30 多个类别下的 600 多个 CSS 加载动画。
link: https://css-loaders.com/