妈妈再也不用担心css难写了！css的奇技淫巧（转）

最新推荐文章于 2024-04-03 14:15:31 发布

原创最新推荐文章于 2024-04-03 14:15:31 发布

· 639 阅读

2 ·

版权

文章标签：

#css #css技巧 #快速实现css

前端同时被 3 个专栏收录

35 篇文章

订阅专栏

vue

32 篇文章

订阅专栏

css

12 篇文章

订阅专栏

本文分享了几个实用的CSS技巧，包括三角形生成器、扇形生成器及多种加载动画效果，还有波浪效果的实现方法。这些技巧不仅简单易懂，且使用CSS实现相比canvas或图片更具性能优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：这个博客是个人在掘金上面看到大神总结了很多的css技巧转发的。非常好用。

最后有福利

举例：

1、三角形生成器（自动生成css代码）：

代码：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #00adb5 transparent;
}

2、扇形生成器

代码：

<svg width="200" :height="200">
  <path d="M 150.00 13.40 A 100 100 0 0 0 100.00 0.00 L 100 100 Z" fill="#00adb5"></path>
</svg>

这些都赶紧很简单是吧，那这个你肯定喜欢：

3、多种的加载动画

4、波浪的实现（大招）

总结：

这些都是截图，实际官网例子非常棒。而且用css实现肯定比canvas或者图片更加节省性能和空间。

建议都去官网看看

官网地址：https://qishaoxuan.github.io/css_tricks/notCSS/wave.html

福利：

是不是看到好多博客下面有看板娘或者一个小动物呢，献上同一个作者的的组件

掘金地址：https://juejin.im/post/5d5137066fb9a06b2a203214

不过这个有点瑕疵，我打算自己研究，看看能不能自己弄一个出来