子比主题用户头像上下浮动，仿佛跃然纸上

子比主题用户头像上下浮动，仿佛跃然纸上
上图：
图片[2]-子比主题用户头像上下浮动，仿佛跃然纸上

下面代码加入后台自定义CSS代码中

或者给头像添加装饰：
图片[3]-子比主题用户头像上下浮动，仿佛跃然纸上
以下代码添加到后台自定义JS代码中：

//头像框JS代码  img图片地址改成自己的图片地址
$(function () {
    $('.avatar-img ').prepend('<img src="https://z1.ax1x.com/2023/11/02/piK4FfS.png" style="top: 0px; transform: scale(1.6); position: absolute; z-index: 1;">');
})

下面时我收集的几张头像装饰图片，感兴趣的可以下载看看。

新增头像分割特效2023/11/3

/*头像分割特效*/

@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. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2766242327进行删除处理。
2. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
★特别声明：
本站为个人博客，博客所发布的一切修改补丁、注册机、注册信息及软件和视频教程的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。访问和下载本站内容，说明您已同意上述条款。本站为非盈利性站点，本站不贩卖软件，所有内容不作为商业行为。

THE END