js+css实现卡片鼠标交互视觉差异效果代码-html代码-BFW代码库

js+css实现卡片鼠标交互视觉差异效果代码

代码语言：html

代码描述：js+css实现卡片鼠标交互视觉差异效果代码

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

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

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


  
  
<style>
body {
  margin: 0;
  background: #f7f9fc;
  overflow: hidden;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  perspective: 100vw;
}

.card {
  --shadowX: 0;
  --shadowY: 0;
  --shadowBlur: 30px;
  width: 300px;
  height: 400px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  z-index: 2;
  cursor: pointer;
  border: 1px outset #fff2;
  transition: height 600ms ease, width 600ms ease;
  
  &:hover {
    --shadowBlur: 10px;

    .ellipseContainer {
      opacity: 1;
    }
  }
  
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
    transition: filter 200ms;
    
    z-index: 0;
  }
  
  &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(50,50,93,0.15);
    transform: translate(var(--shadowX), var(--shadowY));
    filter: blur(var(--shadowBlur));
    border-radius: 10px;
    transition: filter 200ms;
    
    z-index: -1;
  }
}

.ellipseContainer {
  position: relative;
  background: #f7f9fc;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.4;
  transition: opacity 300ms;
}

.ellipse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%); 
  opacity: 0.4;
}

.ellipse1, .bgEllipse1 {
  background: radial-gradient(#9a66ff, #9a66ff00 70%);
}

.ellipse2, .bgEllipse2 {
  background: radial-gradient(#2cede2, #2cede200 70%);
}

.bgEllipse1,
.bgEllipse2 {
  opacity: 0.2;
  transition: opacity 200ms;
}
</style>

  
  
</head>

<body translate="no">
  <div class="ellipse bgEllipse2"></div>    
<div class="ellipse bgEllipse1"></div>
<div class="container">
  <div class="card">
    <div class="ellipseContainer">
      <div class="ellipse ellipse2"></div>    
      <div class="ellipse ellipse1"></div>
    </div>
  </div>
</div>

<div class="mouseEllipse"></div>
  
      <script  >
// full background ellipse follow mouse
const cardEl = document.querySelector('.card');
const ellipse1 = document.querySelector(�.........完整代码请登录后点击上方下载按钮下载查看