背景 在上一篇文章 一个炫酷的css动画里面，我们实现了一个酷炫的css动画。 那个最终实现上面，用了很多的标签在里面，有一些是效果需要，但是有一些是可以精简的。 于是想减少一下标签的使用来实现类似的

最近有一个需求，要我实现一个动画效果，效果如下 简单分析了一下效果，是一个3d的效果，首先是一个圆，接着是两段圆环，第三层是一堆小圆环，最里面是一些线上运动，有着渐变色的矩形。 第一层的圆环很简单。

翻转图像是在视觉上比较两个不同图像的常用方法。单击其中一个将翻转它，并显示另一个图像。 布局 布局结构如下： 它有正面和背面两面，放置在内部容器内。我们希望它们彼此重叠。最好的方法是使用容器 rel

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样： 这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码： 但是，原生的 dashed 有一个问题，就是我们

基于css3写出来的一个底部导航栏效果，配合js形成了这种点击效果，如图。，然后通过一些css3的阴影等效果完成了如图的设计，文章内含有详细的注释

觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS b…

这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。 有些图片（例如下面这个jpg动图）太大，进行了一定程度的压缩，有点模糊（＾_＾）。 改进版：大小和亮暗用gap控制，近大远小，近亮远暗。 这篇文章画的是angle一个纬度，只要再增加另外一个纬度r…

1.柱状图柱状图拆分来看的话，是由两个平行四变形和一个矩形组成，如下：为了让柱状图更加美观，我们加上阴影、和渐变色、缓慢上升的效果：效果图代码链接：pen/KKKEQvy2.圆柱圆柱的话就相对比较简单

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将