10个可以提升开发效率的CSS辅助工具,快速生成常用代码片段
大家好,今天给大家推荐几个我一直在用的 css辅助工具,可快速生成常用css代码片段,让你开效率大大提升, 同时也是非常好的学习资源。
![](https://filescdn.proginn.com/f24d2ed9ccea4d60ace41aad1535aacc/39b3924fc2d840003e0bad5abd129bb9.webp)
box-shadow阴影预览及代码生成
可以非常快速的给元素设置box-shadow的属性值,水平位移、垂直位移、模糊半径、色值等,还可以随时查看代码。
![](https://filescdn.proginn.com/7fed7a49813e3ddb615a4b9af7b3a340/a8fc9ce6960b5d49e2867a0ea8be746a.webp)
资源地址:https://www.html.cn/tool/css3Preview/Box-Shadow.html
渐变代码生成器
可快速设置渐变类型、渐变方向、渐变的范围。
![](https://filescdn.proginn.com/44bd3f16026d377872b2e9f428415799/4cd5794743263aa22fe55ea9ab2a9b5c.webp)
资源地址:http://www.internetke.com/jsEffects/2014120803/
渐变配色方案网站
看似和上面的工具有些相似,其实差别很大的。该网站是专门提供渐变色效果的站点,里面接近上百种渐变配色方案,可根据自己风格来选择搭配,能直接获得对应渐变配色的 CSS 代码。
![](https://filescdn.proginn.com/4ff10be6c5e15ee8e47fff74c51bf5be/6481c1ee44f348b128160b3b1a84f81e.webp)
资源地址:https://uigradients.com/#RoyalBlue
动画缓动函数预览+代码生成
选择动画类型,配置动画时长和动作,即刻生成预览和代码。
![](https://filescdn.proginn.com/4ab05544331b48be716aae78017e93e7/bde35f2957c668dd0b1292f1ed1794f5.webp)
资源地址:https://xuanfengge.com/easeing/ceaser/
雪碧图合成+代码生成
简单3步拿到合成图和代码,这比起自己手写效率要高的多,是个好工具。
上传要合成的图片 选择图片的padding值 设置图片组合的方向 下载图片、复制代码
资源地址:https://www.toptal.com/developers/css/sprite-generator
css3 loading动画效果代码生成器
这是一个专门搞各种加载效果的网站,仅使用(transform
和 opacity
)CSS 动画来创建平滑且易于自定义的动画。当然也提供了源码,如果正好需要可以直接复制过来。
目前该网站已有11种纯css实现的loading动画。
![](https://filescdn.proginn.com/e22f2254d0b20e3e4c1c1cd3182ad69c/89e6be424c551df58648340995498d05.webp)
![](https://filescdn.proginn.com/f4e14a78a8fe34455e3e55d9c6742d62/7aed7c9f58dd8445bb2166902679d504.webp)
![](https://filescdn.proginn.com/c549ac6a13eceae9aee9e4413ab5a0ff/aec162c178fb1a42d0d94bdef0a0d981.webp)
![](https://filescdn.proginn.com/398450f50098ba0c1679d10799bb0294/59bc1185191ce3a176f39958514a1a6f.webp)
![](https://filescdn.proginn.com/32640597e2de27f6b1f42da45c47439e/4ebfb537a33ea4b2cf181902309b47ca.webp)
![](https://filescdn.proginn.com/043da429779775d8d138eb7510c1c557/5a5c260fa05cdb50c4070a4eddc29846.webp)
"spinner">
.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来实现这些效果。还有背景图和背景颜色动画。
动画类型设计的非常全面,网站体验很棒,除了可以复制代码外,也是个不错的学习工具。
![](https://filescdn.proginn.com/3ff62142ca2528a849e0df48b0094e0a/80f684eaa57b0752887117ec5cd0a679.webp)
![](https://filescdn.proginn.com/1eaab8feb26e092546719ca1fc57e7b1/1999d1ab82f6fcf7fa6b7dc947cbf41b.webp)
偷个懒,只放了静态图,有兴趣的一定要打开体验下。
资源地址:https://animista.net/play/entrances/slide-in-blurred
工作中常用效果总结
网站1 - You-need-to-know-css
![](https://filescdn.proginn.com/a01ae5718310479003e1b6359f5eb30a/90f9d6469f2f4feae25e9536463b5b44.webp)
笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档,该项目整理了 CSS 的各种布局以及效果实现,同时提供了完整的实现代码。
目前文档一共包含 43 个 CSS 的小样式(持续更新中)是非常不错的学习资源。
![](https://filescdn.proginn.com/b307a7badc678891659657f1906c5c22/652f07672b1cb4e280bdcabffe0d80ac.webp)
![](https://filescdn.proginn.com/ff65a058661286d1cb042858bb3a328c/2d3d46022bb90b7c65b24b66430dbf0a.webp)
资源地址:https://lhammer.cn/You-need-to-know-css/#/zh-cn/multiple-borders
网站2 - CSS Tricks
总结一些常用的 CSS 样式,记录一些 CSS 的新属性和一点奇技淫巧,没有废话,代码简单易用,方便复制。
![](https://filescdn.proginn.com/14ad5912264bc2d0adcee7eef00677b3/2528ab81ee67e8cc1b80b86139cd82d9.webp)
举个栗子:卡券生成器
![](https://filescdn.proginn.com/8998be0cf0b82782a8eb8ae9ca8c1b96/eda5e17caf231bd1c01bb7817e2cc274.webp)
.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://filescdn.proginn.com/0d79452f255513ea6541c8728b3b8fc6/a138ca064391ec75e684982c844655f8.webp)
资源地址:https://qishaoxuan.github.io/css_tricks/
说实话我还是偷懒了,阅读体验上不太好,没有把网站的动画效果做成gif。各位小伙伴有么有好用的gif工具呢?留言分享下吧。
以上就是本期分享。我是水月,动动发财的小手给咱来个点赞 + 在看 ,祝大家都能心想事成、发大财、行大运。