<p>一直以来，在实现设计图上各种各样效果的时候，秉承着能用 CSS 就不用 JS 的想法，再难的效果我都会先想办法先用 CSS 进行制作，实在无计可施了才使用上 JS （更好的发散思维至少是无害的吧，哈哈哈哈哈哈哈）。</p>
<p>然而实现之余，代码就放着着网了，到了下一次突然想起来好像之前做过同样的效果，代码却已经很难再找出来。</p>
<p>于是把一些实现过纯 CSS 的效果做一个集合，方便自己查看。</p>
<p><strong>（持续更新...）</strong></p>
<h1 id="波浪气泡球">波浪气泡球</h1>
<p>迅雷的下载进度气泡球想必大家都见过吧，那实现一个跟迅雷一样的波浪气泡球应该怎么做呢？使用纯 CSS 呢？要是只用一个 DIV 标签呢？<br><del>今天，小编就带大家来看看吧。近日...</del><br>这里只展示了使用一个 DIV 实现波浪气泡球的效果：</p>
<ul>
<li>DIV 元素长宽一致，设置 <code>border-radius</code> 变成圆形；</li>
<li>运用 <code>::before</code> 和 <code>::after</code> 在 DIV 内部作两个边长不一致的圆角正方形；</li>
<li>两个圆角矩形错综进行同势圆周运动；</li>
<li>另外 DIV 设置 <code>padding-top</code> 即可控制波浪的高度；</li>
</ul>
<p>预览失效？<a href="https://codepen.io/ChrisChan1213/pen/aboNBpX" target="new">在线地址</a></p>
<iframe src="https://codepen.io/ChrisChan1213/pen/aboNBpX" width="100%" height="400px" frameborder="0"></iframe>

<h1 id="网易云音乐唱片">网易云音乐唱片</h1>
<p>作为一名老网抑云，平常看得最多的动画就是网易云播放音乐时唱片的播放效果，自然也要试着实现同样的效果。这里同样只使用的一个 DIV 元素。</p>
<ul>
<li>DIV 元素样式设置为圆，背景使用 <code>repeating-radial-gradient</code> 径向渐变，作黑灰相间的黑胶底片；</li>
<li>运用 <code>::before</code> 在 DIV 上作等大的圆，背景使用 <code>conic-gradient</code> 圆锥渐变，在 25% 和 75% 两个相对的位置设置半透明白色产生胶片高光；</li>
<li>再用 <code>::after</code> 在 DIV 上作圆，背景使用 <code>radial-gradient</code> 径向渐变，填充一定大小的内圈红色、外圈半透明黑色的圆，为唱片封面放置的位置；</li>
<li>DIV 可使用 <code>animation</code> 动画进行 360° 旋转，<code>:hover</code> 时设置 <code>animation-play-state: paused;</code>可实现鼠标悬停时停止旋转；</li>
</ul>
<p>预览失效？<a href="https://codepen.io/ChrisChan1213/pen/ZEzWPwG" target="new">在线地址</a></p>
<iframe src="https://codepen.io/ChrisChan1213/pen/ZEzWPwG" width="100%" height="400px" frameborder="0"></iframe>

<h1 id="疯狂弹球">疯狂弹球</h1>
<p>这个其实没什么好说的，就嗯混。同样只用一个 DIV 元素。</p>
<ul>
<li>DIV 元素设置宽高作一个范围；</li>
<li>用 <code>::before</code> 在 DIV 上作一个小球，添加横向与纵向移动的动画；</li>
<li>注意为动画添加 <code>alternate</code> 属性让两个动画分别都能反向播放，小球就能在范围里反弹反弹无限反弹了；</li>
</ul>
<p>预览失效？<a href="https://codepen.io/ChrisChan1213/pen/RwbaOaY" target="new">在线地址</a></p>
<iframe src="https://codepen.io/ChrisChan1213/pen/RwbaOaY" width="100%" height="400px" frameborder="0"></iframe>

<h1 id="黑白无间道">黑白无间道</h1>
<p>偶然发现 CSS 滤镜的 <code>contrast</code> 对比度滤镜和 <code>blur</code> 模糊滤镜能产生融合的效果，通过对比度滤镜将模糊边缘顺滑的和背景交融到一块。<br>这里实现一个小球交替穿过黑白背景的动画，也使用一个 DIV 元素。</p>
<ul>
<li>DIV 元素设置 白-黑 线性渐变背景，设置滤镜 <code>filter: contrast(30);</code>；</li>
<li><code>::before</code> 同样设置 白-黑 线性渐变背景，设置滤镜 <code>filter: blur(20px);</code>；</li>
<li><code>::after</code> 为 黑-白 背景交替，设置动画在 DIV 元素里来回穿梭 白-黑 区域；</li>
<li><del>最后的效果看起来还挺治愈的，看了老半天了</del></li>
</ul>
<p>预览失效？<a href="https://codepen.io/ChrisChan1213/pen/xxKVoZb" target="new">在线地址</a></p>
<iframe src="https://codepen.io/ChrisChan1213/pen/xxKVoZb" width="100%" height="400px" frameborder="0"></iframe>

<h1 id="希望五星好评没事">希望五星好评没事</h1>
<p>之前自己实现星级评分都是循环五颗星星，点击其中一颗，将其与其之前的所有星星点亮。转而又想，点亮星星的操作能不能交给 CSS 里的各种选择器来实现呢？于是：</p>
<ul>
<li>每一颗星星由 type 为 radio 的 INPUT 和 LABEL 组成，INPUT 在前 LABEL 在后，LABEL 设置样式画出星星；</li>
<li>单标签实现星星形状，由该元素以及 <code>::before</code> 和 <code>::after</code> 分别画出锐角三角形和两个钝角三角形组合形成；</li>
<li>锐角三角形或钝角三角形则由宽高为 0 以及单边边框填充颜色实现；</li>
<li>将包住所有星星的父级元素设置为 flex-box 布局，通过 <code>flex-flow: row-reverse;</code> 将子元素顺序反转（非常关键）；</li>
<li>由于将星星的顺序反转，这时候可以使用 <code>~</code> 后续兄弟元素选择器，将选中的 radio INPUT 后所有星星点亮（点亮的顺序变为正序）；</li>
<li>如果是静态展示的星级评分，只需要将每个 radio INPUT 设置为 disabled 即可；</li>
<li>包含半星的评分则在 LABEL 中再添加一个 DIV 元素，DIV 画出星星形状，LABEL 将 DIV 截成半星（这里偷懒了，可以不需要 DIV 直接画半星），这时星星个数为 10 个半星，其余按照上方的思路也可以实现；</li>
</ul>
<p>预览失效？<a href="https://codepen.io/ChrisChan1213/pen/eYOdxxM" target="new">在线地址</a></p>
<iframe src="https://codepen.io/ChrisChan1213/pen/eYOdxxM" width="100%" height="400px" frameborder="0"></iframe>

不可思议的纯 CSS 实现宁想要的效果