10个可以提升开发效率的CSS辅助工具，快速生成常用代码片段
大家好，今天给大家推荐几个我一直在用的 css辅助工具，可快速生成常用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 动画来创建平滑且易于自定义的动画。当然也提供了源码，如果正好需要可以直接复制过来。
目前该网站已有11种纯css实现的loading动画。
"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://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/
说实话我还是偷懒了，阅读体验上不太好，没有把网站的动画效果做成gif。各位小伙伴有么有好用的gif工具呢？留言分享下吧。
以上就是本期分享。我是水月，动动发财的小手给咱来个点赞 + 在看 ，祝大家都能心想事成、发大财、行大运。