子比主题美化-头像分割特效

2024-11-1

在奇妙的网络世界中，每一个细节都可能成为吸引用户的关键。当你探索一个精心设计的网站时，会发现诸多令人惊喜的小创意。其中之一便是，当你轻轻地将鼠标移动到头像上面，一场独特的视觉盛宴便会瞬间呈现在你的眼前。

此时，头像仿佛被施了魔法一般，展现出一种被割开的特效。那一瞬间，如同开启了一扇神秘的大门，引领你进入一个充满奇幻色彩的世界。头像的边缘开始出现细微的裂痕，仿佛是被一把无形的利刃精准地切割开来。这些裂痕逐渐蔓延，以一种细腻而又生动的方式展现出头像内部的神秘世界。每一道裂痕都仿佛在诉说着一个故事，勾起人们的好奇心和探索欲。

这种特效不仅仅是一种视觉上的享受，更是网站设计者用心打造的独特体验。它为用户带来了一种全新的互动感受，让用户在浏览网站的过程中，不经意间发现这样一个小小的惊喜。无论是对于追求个性化的用户，还是对于喜欢探索新奇事物的访客，这个特效都有着极大的吸引力。

如果你也被这样的特效所吸引，渴望为自己的网站增添一份独特的魅力，那么不妨设置一个。让你的网站在众多的网络平台中脱颖而出，为用户带来更加丰富、有趣的浏览体验。无论是用于个人博客、商业网站还是社交平台，这个小小的特效都能为你的网站注入新的活力，吸引更多的用户驻足停留，共同探索这个充满创意的网络世界。

效果展示

子比主题美化-头像分割特效

代码部署

把代码放到后台主题设置自定义CSS代码里即可

/*头像分割特效*/

@property --d {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@property --r {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.avatar {
  --n: 4;
  width: 200px;
  height: 200px;
  --r: 0deg;
  --d: 0%;
  -webkit-mask: linear-gradient(
      var(--r),
      transparent var(--d),
      red 0 calc(100% - var(--d)),
      transparent 0
    ),
    linear-gradient(
      calc(var(--r) + 90deg),
      transparent var(--d),
      red 0 calc(100% - var(--d)),
      transparent 0
    );
  -webkit-mask-size: calc(100% / var(--n)) calc(100% / var(--n));
  -webkit-mask-composite: source-in;
  cursor: pointer;
}
.avatar:hover {
  animation: r 0.5s;
}

@keyframes r {
  0% {
    --d: 0%;
  }
  100% {
    --d: 0%;
    --r: 90deg;
  }
  50% {
    --d: 20%;
  }
}
/*头像分割特效*/

阅读剩余

十一 1