css实现鼠标进入方向感知盒子动画效果代码-html代码-BFW代码库

css实现鼠标进入方向感知盒子动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标进入方向感知盒子动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  align-items: center;
  background-color: #e1fee2;
  display: flex;
  font-family: sans-serif;
  font-weight: 900;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

.box {
  --box-width: 300px;
  border-radius: 16px;
  box-shadow: 0 2.2px 2.2px rgba(0, 0, 0, 0.068),
    0 5.3px 5.3px rgba(0, 0, 0, 0.093), 0 10px 10px rgba(0, 0, 0, 0.103),
    0 17.9px 17.9px rgba(0, 0, 0, 0.11), 0 33.4px 33.4px rgba(0, 0, 0, 0.115),
    0 80px 80px rgba(0, 0, 0, 0.12);
  height: var(--box-width);
  overflow: hidden;
  position: relative;
  width: var(--box-width);
}

.drop {
  background: linear-gradient(#37854f, #173620);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.activator {
  height: 100%;
  position: absolute;
  width: 100%;
}

.activator.northwest {
  /* background-color: #fff; */
  clip-path: polygon(50% 50%, 0% 25%, 0% 0%, 25% 0%);
}

.activator.north {
  /* background-color: #f9f; */
  clip-path: polygon(50% 50%, 25% 0%, 75% 0%);
}

.activator.northeast {
  /* background-color: #ff9; */
  clip-path: polygon(50% 50%, 75% 0%, 100% 0%, 100% 25%);
}

.activator.east {
  /* background-color: #9ff; */
  clip-path: polygon(50% 50%, 100% 25%, 100% 75%);
}

.activator.southeast {
  /* background-color: #99f; */
  clip-path: polygon(50% 50%, 100% 75%, 100% 100%, 75% 100%);
}

.activator.south {
  /* background-color: #f99; */
  clip-path: polygon(50% 50%, 25% 100%, 75% 100%);
}

.activator.southwest {
  /* background-color: #999; */
  clip-path: polygon(50% 50%, 0% 75%, 0% 100%, 25% 100%);
}

.activator.west {
  /* background-color: #9f9; */
  clip-path: polygon(50% 50%, 0% 25%, 0% 75%);
.........完整代码请登录后点击上方下载按钮下载查看