无所不能的前端CSS工具！又能解放双手了！
<p>大家好，最近发现了一个网站 <strong>Omatsuri</strong> 挺实用的，这是一个提供 <code>CSS</code> 样式的网站，非常实用，基本覆盖了我们平常开发中所遇到的一些场景</p><blockquote>
<p>地址：https://omatsuri.app/</p>
</blockquote>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNVC9nOLAcvXHviaicwSpOvVcgeunyvb6Cm6Hh0J0hBWZUpAs1P5XTaUQw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>三角形生成</h2>
<p>如果你想用 CSS 画一个三角形，你又不想自己写，因为太麻烦了，这个时候你可以直接使用这个网站去生成</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNaG3FsvAoU1PVTn8jsoMkV10xh1hLmzx0UpWG7EspLgQ9vtv5Y2z5ww/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>你可以随意修改颜色、高度、宽度、角度、方向等等，修改完之后，下方会提供现成的 CSS 样式代码让你复制，是不是非常的方便~</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNVt5PKTqDSgmuiau7x2sleSAjEmASXT4ibZASDpxblefWOpxVysw4LKibQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>渐变背景颜色生成</h2>
<p>平时在做一些官网之类的网站时，也会经常需要将背景颜色设置成渐变风格，这样更加好看，吸引用户，但是渐变写起来非常麻烦，所以可以借助这个网站去实时预览调试</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNxLsFVNh5K6ZPORHCdx0V8VibsibpWKWsnR3ibvRibPTKXdYgwPmvpRbrDA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>可以自行改变起始和结束的颜色，调整渐变程度，方向，并且可以直接复制现成的 CSS 样式代码到你的项目中使用</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNADPicA8c4msLpAJict609pRb770XdKjic92FtDdV0UD0GADpaEC7UslKg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>页面分割线</h2>
<p>当你想要给你的网页加上一些好看的分割线，不想太单调时，你也可以使用这个网站去生成获取，它提供了好几种风格任你挑选，老规矩，会提供给你现成的代码让你复制</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNe5yRX0MphZOwP5t3BR04YeiaMicNTsNKcfp9fEvePbpagw9nmS7VN4KQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>鼠标光标样式</h2>
<p>当你想要改变你的鼠标光标样式时，你可以到这个网站上看一看，看看有没有你想要的光标样式</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNrbQYJE3MBggJBaVa6kibBkzXE7ASb8AlxsVth937USYymnNRw0oQZDQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>生成 mock 数据</h2>
<p>当你想生成 mock 数据来调试页面时，也可以在这个网站上进行生成，通过 JSON SCHEMA 的方式进行定义生成即可</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNrbQYJE3MBggJBaVa6kibBkzXE7ASb8AlxsVth937USYymnNRw0oQZDQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>自动生成键盘事件监听代码</h2>
<p>我们开发中可能需要监听键盘事件，但是不知道特定的按键怎么监听，这个时候可以到这个网站上，只需要按下你想监听的按键，页面上就会自动生成你这个按键的监听事件代码，供你复制</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNzP95YAlG0cQJoAmicyal1C6sdgicic2hcc1PVwGBJLsXxmiagKrfMbnEmw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>base64</h2>
<p>你可以上传文件，让它帮你转换成 base64 格式</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcNIs4tnbtvcLdQib1zQb6VZmc5bkwrmV7Q45Hjz7z9QbbIY1qxBnNfzmQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>SVG 转 JSX</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_png/TZL4BdZpLdjPoAAPHXgXzcduC9En4jcN05WYagbnJgYw7BictyYZ927UxkVILfvurrl9fDUesjq20yzz4jGibJog/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
页:
[1]