CSS实现随机不规则圆角头像

🎄 前言

最近真是彻底爱上了 CSS ，我又又又被 CSS 惊艳到了，明明是简单的属性，为啥大佬们稍微一组合，就能形成如此好看的效果啊。

本文给大家带来的是随机不规则圆角头像效果，我们可以把这个效果用于一些人物的展示页面(例如: 2016.uxlondon.com/speakers 嘉宾头像)

学习本文章,你可以学到:

• border-radius 实现椭圆效果
• border-radius 实现不规则圆角头像
• animation-delay 设置负值
• 实现随机不规则圆角

📃 预备知识

🎨 border-radius

border-radius 可以设置外边框的圆角。比如我们经常使用的 border-radius: 50% 可以得到一个圆形头像。

但 border-radius 就只能实现圆形效果吗？当然不是，当使用一个半径是确定圆形，两个半径时则会确定椭圆形。

光说不练假把式，接下来一起试试

1. 设置 border-radius: 30% 70%，就可以得到椭圆效果

上面的设置都是针对于四个方向的，也可以只设置一个方向的圆角

2. 设置 border-top-left-radius: 30% 70%

从上图其实可以得出，两个值分别设置水平半径和垂直半径的半径，为了更准确我们验证一下

但为啥设置的圆角与 border-radius: 30% 70% 设置有这么大的差距。别急，下面慢慢道来。

3. 设置 border-radius: 30%/70%，/ 前后的值分别为水平半径和垂直半径

border-radius: 30%/70% 相当于给四个方向都设置 30%/70%，而 border-radius: 30% 70% 是给左上右下设置 30% ，左下右上设置 70%

4. 设置四个方向为四种椭圆角: border-radius: 40% 60% 60% 40% / 60% 30% 70% 40% ，就可以实现简单的不规则圆角效果，小改改的头像是不是看起来舒服了好多。

💞 animation-delay

animation-delay: 可以定义动画播放的延迟时间。

但如果给 animation-delay 设置负值会发生什么那？

MDN 中指出: 定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为 -1s ，动画会从它的动画序列的第 1 秒位置处立即开始。

那个，乍看上去，我好像懂了，又好像没懂，咱们还是来自己试一下吧。

• 创建 div 块，宽高都为 0 ，背景设置为 #000
• 添加 keyframe 动画，100% 状态宽高都扩展为 1000px

@keyframes extend {
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 1000px;
        height: 1000px;
    }
}
复制代码

• 给 div 添加 animation 和 animation-delay

/* 设置 paused 可以使动画暂停 */
animation: extend 10s linear paused;
animation-delay: -3s;
复制代码

当我打开浏览器时，浏览器出现 300*300 的黑色块，修改 animation-delay 为 -4s ，浏览器出现 400*400 的黑块。我们使用 linear 匀速作为动画播放函数，10s 后 div 会变为 1000px，设置 -3s 起始为 300px，-4s 起始为 400px。

这样一对比，我们来把 MDN 的描述翻译一下:

• animation-delay 设置负值的动画会立即执行
• 动画起始位置是动画中的一阶段，比如上述案例，定义 10s 的动画，设置 -3s 动画就从 3s 开始执行

🌊 radius 配合 delay 实现

有了上面基础知识的配合，不规则圆角的实现就变得很简单了。

设置 keyframe ，keyframe 的开始与结束为两种不规则圆角，再使用 :nth-child 进行自然随机设置 animation-delay 的负值延迟时间，就可以得到一组风格各异的不规则圆角效果

自然随机的算法非常有意思，效果开创者为了更好、更自然的随机性，选取序列为 2n+1 3n+2 5n+3 7n+4 11+5 ...

1. 设置 keyframe 动画

@keyframes morph {
    0% {
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        transform: rotate(-5deg);
    }
    100% {
        border-radius: 40% 60%;
        transform: rotate(5deg);
    }
}
复制代码

2. 自然随机设置每个头像的 delay

.avatar:nth-child(n) {
    animation-delay: -3.5s;
}
.avatar:nth-child(2n + 1) {
    animation-delay: -1s;
}
.avatar:nth-child(3n + 2) {
    animation-delay: -2s;
}
.avatar:nth-child(5n + 3) {
    animation-delay: -3s;
}
.avatar:nth-child(7n + 5) {
    animation-delay: -4s;
}
.avatar:nth-child(11n + 7) {
    animation-delay: -5s;
}
复制代码

当当当当~~~ 效果就实现了! 看着下面这些风格各异的小改改，瞬间心情舒畅了好多。

不规则圆角头像的功能实现了，但总感觉缺点什么？如果头像能有点动态效果就更好了。

例如 hover 时，头像圆角会发生变化，用户的体验会更好。

我首先的想法还是在上面的代码基础上面更改，但由于 @keyframe 定义好了终点时的状态，能变化的效果并不多，而且看起来很单调，显得很呆 🤣。

那有没有好的实现方案那？有，最终我找到了张鑫旭大佬的实现方案，大佬还是大佬啊。

🌟 radius 配合 transition 实现

参考博客: “蝉原则”与CSS3随机多背景随机圆角等效果

1. 按照自然随机给每个头像赋予不同的不规则圆角

/* 举两个例子 */
.list:hover {
  border-radius: 95% 70% 100% 80%;
  transform: rotate(-2deg);
}
.list:nth-child(2n+1) {
  border-radius: 59% 52% 56% 59%;
  transform: rotate(-6deg);
}
复制代码

2. 设置 hover 时新的不规则圆角

.list:nth-child(2n+1):hover {
  border-radius: 51% 67% 56% 64%;
  transform: rotate(-4deg);
}
.list:nth-child(3n+2):hover {
  border-radius: 69% 64% 53% 70%;
  transform: rotate(0deg);
}
复制代码

3. 给 list 元素配置 transition

完成上面的步骤，我们就可以得到更灵动的小改改头像了。

但这种实现方法相比较于 radius 配合 animation-delay 实现具备一定的难点，需要设计多种好看的不规则圆角效果

🛕 源码仓库

传送门: 随机不规则圆角

如果感觉有帮助的话，别忘了给小包点个 ⭐ 。