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

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;

}