react实现三维悬浮倾斜带阴影卡片效果代码-html代码-BFW代码库

react实现三维悬浮倾斜带阴影卡片效果代码

代码语言：html

所属分类：悬停

代码描述：react实现三维悬浮倾斜带阴影卡片效果代码

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

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

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


  
  
<style>
body {
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%20250%20250'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20opacity%3D'0.15'%20filter%3D'sepia(1)'%3E%3Cfilter%20id%3D'noiseFilter'%3E%3CfeTurbulence%20type%3D'turbulence'%20baseFrequency%3D'2'%20numOctaves%3D'1'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23noiseFilter)'%20fill-opacity%3D'0.5'%2F%3E%3C%2Fsvg%3E");
  background-color: rgba(229, 224, 216, 0.5);
}

.app {
  display: flex;
  width: 100%;
  height: 100%;
}

.container {
  margin: auto;
  perspective: 1000px;
  width: var(--width);
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
}
.container.over .frame {
  box-shadow: calc(var(--x) * -4px + 2px) calc(var(--y) * -4px + 2px) 2px 2px rgba(153, 128, 102, 0.2), calc(var(--x) * -8px + 4px) calc(var(--y) * -8px + 4px) 4px 4px rgba(153, 128, 102, 0.2), calc(var(--x) * -16px + 8px) calc(var(--y) * -16px + 8px) 8px 8px rgba(153, 128, 102, 0.2), calc(var(--x) * -32px + 16px) calc(var(--y) * -32px + 16px) 16px 16px rgba(153, 128, 102, 0.2), calc(var(--x) * -64px + 32px) calc(var(--y) * -64px + 32px) 32px 32px rgba(153, 128, 102, 0.2);
  transform: scale(1.05) rotateY(calc(20deg * var(--x) - 10deg)) rotateX(calc(-20deg * var(--y) + 10deg));
}
.container .frame {
  transition: all 0.1s ease;
  background-color: #fff;
  display: flex;
  border-radius: 0.2rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 2px rgba(153, 128, 102, 0.2), 0 0 4px rgba(153, 128, 102, 0.2), 0 0 8px rgba(153, 128, 102, 0.2), 0 0 16px rgba(153, 128, 102, 0.2), 0 0 32px rgba(153, 128, 102, 0.2);
}
.container .frame .photo {
  flex: 1;
  margin: 0.75rem;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  border-radius: 0.1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.container .frame .shine {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  mix-blend-mode: overlay;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  transform: translate(calc(50% * var(--x)), calc(50% * var(--y)));
}
</style>


  
</head>

<.........完整代码请登录后点击上方下载按钮下载查看