CSS 实现随机不规则圆角头像，让你的头像脱颖而出

2023-11-19 18:28:24

引言

在现代网络世界中，头像已成为个人形象和品牌的重要组成部分。为了在竞争激烈的数字领域脱颖而出，定制头像至关重要，因为它可以传达你的独特个性和风格。使用 CSS，你可以轻松地创建具有随机不规则圆角的头像，为你的在线形象增添一抹别致气息。

实现方法

方法 1：animation-delay 负值

首先，你需要创建一个包含头像图像的容器元素。然后，使用 border-radius 属性指定所需的圆角半径。

.avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

接下来，使用 animation 属性设置 border-radius 属性的过渡效果。通过使用负的 animation-delay 值，你可以创建随机的圆角效果。

.avatar-container {
  ...
  animation: random-radius 5s infinite;
}

@keyframes random-radius {
  0% {
    border-radius: 50%;
  }
  25% {
    border-radius: 25% 75% 75% 25% / 25% 25% 75% 75%;
  }
  50% {
    border-radius: 75% 25% 25% 75% / 25% 75% 75% 25%;
  }
  75% {
    border-radius: 25% 75% 75% 25% / 75% 25% 25% 75%;
  }
  100% {
    border-radius: 75% 25% 25% 75% / 75% 75% 25% 25%;
  }
}

方法 2：transition

另一个实现随机不规则圆角的方法是使用 transition 属性。与前一种方法类似，你首先需要创建一个包含头像图像的容器元素并设置圆角半径。

.avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  transition: border-radius 1s ease-in-out;
}

然后，使用 JavaScript 为容器元素添加事件监听器，当触发事件（例如鼠标悬停）时更改 border-radius 属性。

const avatarContainer = document.querySelector('.avatar-container');

avatarContainer.addEventListener('mouseover', () => {
  avatarContainer.style.borderRadius = '25% 75% 75% 25% / 25% 25% 75% 75%';
});

avatarContainer.addEventListener('mouseout', () => {
  avatarContainer.style.borderRadius = '50%';
});