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

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

🎄 前言


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


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


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


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


📃 预备知识


🎨 border-radius


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


image.png


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


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


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


image.png


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


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


image.png


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


image.png


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


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


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


image.png


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


image.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;
}
复制代码


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


image.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


image.png


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


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


🛕 源码仓库


传送门: 随机不规则圆角

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


相关文章
|
1月前
|
前端开发 开发者
CSS语言的规则集(Rule Set)或规则(Rule)
CSS语言的规则集(Rule Set)或规则(Rule)
css3中的圆角border-radius
css3中的圆角border-radius
|
1天前
|
前端开发 开发者
CSS 选择器与相关规则详解
CSS 选择器与相关规则详解
6 0
|
22天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
21 0
|
22天前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
27 0
|
1月前
|
XML 前端开发 数据格式
css的主要规则
【4月更文挑战第14天】css的主要规则
16 6
|
1月前
|
XML 前端开发 数据格式
什么是CSS?CSS的基本规则是什么?
什么是CSS?CSS的基本规则是什么?
|
1月前
|
前端开发
CSS的语法是用来定义网页中元素样式的规则集合
【4月更文挑战第6天】CSS的语法是用来定义网页中元素样式的规则集合
23 5
|
1月前
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
|
1月前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?