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

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

「这是我参与11月更文挑战的第25天,活动详情查看:2021最后一次更文挑战

🎄 前言

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

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

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

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

📃 预备知识

🎨 border-radius

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

radius50.png

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

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

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

radius3070.png

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

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

radius3070top.png

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

radiusopa.png

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

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

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

radius30-70.png

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

radiusdisorder.png

💞 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 添加 animationanimation-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 实现

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

设置 keyframekeyframe 的开始与结束为两种不规则圆角,再使用 :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);
    }
}
复制代码
  1. 自然随机设置每个头像的 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;
}
复制代码

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

avater.png

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

例如 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);
}
复制代码
  1. 设置 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);
}
复制代码
  1. list 元素配置 transition

avatar.gif

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

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

🛕 源码仓库

传送门: 随机不规则圆角

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

💘 往期精彩文章

💥 后语

伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!

如果感觉评论区说不明白,也可以添加我的微信(li444186976)或者 qq(3315161861) 详细交流,名字都是战场小包。

文章分类
前端
文章标签