css实现鼠标悬浮打开礼品盒显示图片效果代码-html代码-BFW代码库

css实现鼠标悬浮打开礼品盒显示图片效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬浮打开礼品盒显示图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@property --h {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --w: 150px; /* image size */
  --b: 12px;  /* the border */
  --d: 30px;  /* the 3D depth */
  --c: #d81a14;
  
  --_w: calc(var(--w) + 2*var(--b));
  width: calc(var(--_w) + var(--d));
  aspect-ratio: 1;
  padding-top: min(var(--h) - var(--b),var(--w));
  border: solid #0000;
  border-width: var(--b) calc(var(--b) + var(--d)) calc(var(--b) + var(--d)) var(--b);
  box-sizing: border-box;
  object-fit: cover;
  object-position: bottom;
  background: 
    linear-gradient(color-mix(in srgb,var(--c),#fff 25%) 0 0) no-repeat
     0 0/calc(100% - var(--d)) calc(100% - var(--d) + var(--h) - var(--_w)),
    conic-gradient(at right var(--d) bottom var(--d),
     #0004 37.5%,#0008 0 75%,#0000 0) var(--c);
  background-origin: border-box;
  clip-path: polygon(0 calc(var(--h) - var(--_w)),calc(100% - var(--d)) calc(var(--h) - var(--_w)),calc(100% - var(--d)) 0,100% var(--d),100% 100%,var(--d) 100%,0 calc(100% - var(--d)));
  box-shadow: 0 0 0 999px color-mix(in srgb,var(--c),#fff 25%);
  --h: calc(var(--_w));
  transition: --h .6s linear;
  cursor: pointer;
}
.alt {
  --c: #8A9B0F;
  border-width: .........完整代码请登录后点击上方下载按钮下载查看