“程”风破浪的开发者｜总结巧用 CSS 实现各种效果的「百计千谋」
前言
在过往的半年中，我实现了 90+的 CSS 效果。即有像 3D 环绕这样简单的动画效果，也有像网页小游戏这样复杂的功能。
我不但收获了创意实现的乐趣，还扩宽了 CSS 属性的知识面。使用并学习到一些不常用但是好用的 CSS 属性，还摸索到一些属性「不为我知」的使用方式。
接下来，就是交给我的总结时刻吧。
CSS 万花筒
一、磨砂效果
UI 效果
效果实现
磨砂的效果，是通过给图形添加高斯模糊的方式实现的。而 CSS 想要实现高斯模糊的效果，给元素添加 filter 滤镜属性即可。
知识点
filter 属性可以为元素定义其可视效果。用于调整图像、背景和边框的渲染。
高斯模糊
blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。
默认值为 0。该参数可以指定为 CSS 长度，但不接受百分比值。
语法
filter: blur(px);
关键代码
完整效果
完整代码已经放到线上代码预览平台，点击跳转查看完整代码。
二、心形马赛克
UI 效果
效果实现
图形中间的心形马赛克，并不是一个像素一个像素实现的，而是使用 box-shadow 属设置多个阴影。只要阴影位置设置合理，就可以实现一个心的形状的。
线条形状的心形，一条线可以看做是一列，这一列的点的横坐标肯定是一致的。心形是两端段，中间长，这样一来就能实现一个完整的心形了。
知识点
box-shadow 属性用于为元素添加阴影效果。可以在同一个元素上设置多个阴影效果，只需要逗号将他们分隔开。
box-shadow 的属性值有：阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和阴影颜色。
关键代码
完整代码
完整代码已经放到线上代码预览平台，点击跳转查看完整代码。
三、包装的凹陷效果
UI 效果
效果实现
元素的背景是可以设置径向渐变颜色的，从中心点向外，可以定义多个颜色值。
当设置边缘的颜色和外层父容器的背景颜色一致时，就会形成凹陷的效果。
知识点
这个功能的实现，就不得不提一个非常好用的 CSS 函数 radial-gradient()。
radial-gradient() 是 CSS 提供的用于创建一个图像的函数。由 radial-gradient() 创建的图像，可以从原点辐射两种或多种颜色之间的渐进过渡。图像的形状可以是圆形、椭圆形。
使用时配合 background-image 属性使用，可以实现背景的渐变颜色。用法如下：
background-image: radial-gradient(circle at center, #fff 0, #000 100%)
在容器中心的渐变，从白色开始，最后变成黑色。径向渐变通过指定渐变的中心（0% 椭圆所在的位置）和结束形状（100% 椭圆）的大小和形状来指定。
关键代码
完整代码
完整代码已经放到线上代码预览平台，点击跳转查看完整代码。
四、蝴蝶振翅🦋
UI 效果
效果实现
蝴蝶振翅的效果我用了一个比较简单的方式，为蝴蝶元素设置了一个沿 Y 轴旋转的动画，旋转的值从大到小，变有了闪动翅膀的动画效果。
知识点
transform 可以实现旋转、缩放、倾斜等多种转换效果。
这里用到了旋转。旋转使用 rotateY() 函数实现。
CSS 的 rotateY() 函数定义了一个转换，它可以使元素围绕纵坐标 (垂直轴) 旋转，但不会对其进行变形。
rotateY()的语法
rotateY(a)
关键代码
完整代码
完整代码已经放到线上代码预览平台，点击跳转查看完整代码。
未完待续
这波效果实现总结告一段落。
CSS 可以帮助我们实现各式各样好玩的展示效果。可能不缺少创意，也不缺少技术，但是技术与创意如何巧妙的结合，是我依然需要深挖探索的。
创意的千变万化，源于对前端知识的融会贯通。
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/851fd71e69a3a56a0d6aae55d】。文章转载请联系作者。
掘金优秀创作者 2022-09-01 加入
非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
评论 (31 条评论)