有趣的CSS3+鼠标覆盖Hover-3D特效代码，让你的网页动起来~

作为一名前端爱好者，总在不断的摸索CSS有趣的样式特效，比如：鼠标覆盖特效(放大缩小旋转...)、CSS3动画特效、渐变特效...

本期分享一个有趣的鼠标覆盖圆形图像会“动”的特效代码：（3D特效代码）

CSS实现原理：

<img src="这里是图片的地址" class="img" alt="这是一个会员头像，给它加一个class属性值："img">

CSS样式代码：

body {

  margin: 0;

  min-height: 100vh;

  display: grid;

  place-content: center;

  background: #e0e4cc;

}

.img {

  --s: 200px; /* image 大小*/

  --b: 6px; /* border 像素*/

  --c: #ae3ec9; /* border 颜色 */

  --cb: #e9ecef; /* 背景色 */

  --f: 1; /* 初始缩放 */

  width: var(--s);

  aspect-ratio: 1;

  padding-top: calc(var(--s)/5);

  cursor: pointer;

  border-radius: 0 0 999px 999px;

  --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;

  --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));

  outline: var(--b) solid var(--c);

  outline-offset: var(--_o);

  background:

    radial-gradient(

      circle closest-side,

      var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000

     ) var(--_g);

  -webkit-mask:

    linear-gradient(#000 0 0) no-repeat

     50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,

    radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);

  transform: scale(var(--f));

  transition: .5s;

}

.img:hover {

  --f:1.4;

}

需要的小伙伴们抓紧免费下载应用下吧！

有趣的CSS3+鼠标覆盖Hover-3D特效代码