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

代码语言：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%);
}

.activator:hover {
  left: 0;
  height: 100%;
  top: 0;
  clip-path: none;
  width: 100%;
  z-index: 1;
}

.overlay {
  align-items: center;
  display: flex;
  font-size: 52px;
  height: 100%;
  justify-content: center;
  position: absolute;
  transition: clip-path 500ms cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
  z-index: -1;
}

.overlay.northwest {
  background: conic-gradient(from -0.125turn, #ffe000, #799f0c 1turn);
}

.overlay.north {
  background: conic-gradient(from 0turn, #ffe000, #799f0c 1turn);
}

.overlay.northeast {
  background: conic-gradient(from 0.125turn, #ffe000, #799f0c 1turn);
}

.overlay.east {
  background: conic-gradient(from 0.25turn, #ffe000, #799f0c 1turn);
}

.overlay.southeast {
  background: conic-gradient(from 0.375turn, #ffe000, #799f0c 1turn);
}

.overlay.south {
  background: conic-gradient(from 0.5turn, #ffe000, #799f0c 1turn);
}

.overlay.southwest {
  background: conic-gradient(from 0.625turn, #ffe000, #799f0c 1turn);
}

.overlay.west {
  background: conic-gradient(from 0.75turn, #ffe000, #799f0c 1turn);
}

.activator.northwest:not(:hover) ~ .overlay.northwest {
  clip-path: path(
    "M -657.60889,-233.34482 -162.63415,261.62992 -91.923471,-91.923469 -70.710261,-70.71026 -141.42094,282.84313 -113.13667,311.1274 -42.425991,-42.42599 -10.606191,-10.60619 -81.316871,342.9472 -70.710261,353.5538 4.0845702e-4,4.0973178e-4 353.5538,-70.71026 342.9472,-81.316869 -10.606191,-10.60619 -42.425991,-42.42599 311.1274,-113.13667 282.84313,-141.42094 -70.710261,-70.71026 -91.923471,-91.923469 261.62992,-162.63415 -233.34483,-657.60889 Z"
  );
}

.activator.northwest:hover ~ .overlay.northwest {
  clip-path: path(
    "M -265.68589,158.57818 229.28885,653.55292 299.99953,299.99953 321.21274,321.21274 250.50206,674.76613 278.78633,703.0504 349.49701,349.49701 381.31681,381.31681 310.60613,734.8702 321.21274,745.4768 391.92341,391.92341 745.4768,321.21274 734.8702,310.60613 381.31681,381.31681 349.49701,349.49701 703.0504,278.78633 674.76613,250.50206 321.21274,321.21274 299.99953,299.99953 653.55292,229.28885 158.57817,-265.68589 Z"
  );
}

.activator.north:not(:hover) ~ .overlay.north {
  clip-path: path(
    "M 0,-530 V -130 L 150,-230 V -200 L 0,-100 V -60 L 150,-160 V -115 L 0,-15 V 0 L 150,-100 300,0 V -15 L 150,-115 V -160 L 300,-60 V -100 L 150,-200 V -230 L 300,-130 V -530 Z"
  );
}

.activator.north:hover ~ .overlay.north {
  clip-path: path(
    "M 0,0 V 400 L 150,300 V 330 L 0,430 V 470 L 150,370 V 415 L 0,515 V 530 L 150,430 300,530 V 515 L 150,415 V 370 L 300,470 V 430 L 150,330 V 300 L 300,400 V 0 Z"
  );
}

.activator.northeast:not(:hover) ~ .overlay.northeast {
  clip-path: path(
    "M 533.34481,-657.60889 38.370072,-162.63418 391.92348,-91.923523 370.71027,-70.710311 17.156862,-141.42097 -11.127417,-113.1367 342.42599,-42.426041 310.60619,-10.606244 -42.947227,-81.316921 -53.553827,-70.710311 299.99959,3.5836464e-4 370.71027,353.5538 381.31688,342.9472 310.60619,-10.606244 342.42599,-42.426041 413.13666,311.1274 441.42093,282.84313 370.71027,-70.710311 391.92348,-91.923523 462.63414,261.62992 957.60887,-233.34482 Z"
  );
}

.activator.northeast:hover ~ .overlay.northeast {
  clip-path: path(
    "M 141.4218,-265.68589 -353.55295,229.28884 4.7145283e-4,299.99951 -21.21274,321.21272 -374.76616,250.50205 -403.05043,278.78632 -49.497012,349.49699 -81.316812,381.31679 -434.87023,310.60611 -445.47683,321.21272 -91.923412,391.92339 -21.21274,745.4768 -10.606129,734.8702 -81.316812,381.31679 -49.497012,349.49699 21.21365,703.0504 49.49792,674.76613 -21.21274,321.21272 4.7145283e-4,29.........完整代码请登录后点击上方下载按钮下载查看