js+css实现炫酷的文字卡片鼠标悬停聚焦动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：js+css实现炫酷的文字卡片鼠标悬停聚焦动画效果代码

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

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

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
  
  
  
<style>
* {
  cursor: none!important;
  text-rendering: geometricPrecision;
  margin: 0;
  padding: 0;
}

:root {
  --initial: #fff;
  --animate1: #0047FF; /* blue */
  --animate2: #9E00FF; /* purple */
  --animate3: #EB2323; /* red */
  --animate4: #00BA61; /* green */
  --animate5: #C3B000; /* yellow */
  --animate6: #D85B00; /* orange */
}

body {
  background:
    radial-gradient(
      73% 101% at 95.54% 95.05%,
      rgba(255, 156, 65, 0.78) 0%,
      rgba(255, 168, 88, 0) 100%
    ),
    linear-gradient(
      197deg,
      rgba(255, 240, 164, 1) 0%,
      rgba(255, 240, 164, 0) 100%
    ),
    radial-gradient(
      59% 74% at 10% -10%,
      rgba(49, 132, 255, 0.8) 0%,
      rgba(56, 75, 246, 0.21) 52%,
      rgba(62, 246, 246, 0) 100%
    ),
    linear-gradient(
      143deg,
      rgba(62, 158, 246, 1) 0%,
      rgba(238, 43, 183, 0.33) 30%,
      rgba(246, 62, 106, 0) 56%
    ),
    linear-gradient(
      288deg,
      rgba(217, 155, 255, 1) 33%,
      rgba(217, 170, 221, 0) 97%
    );
  background-blend-mode: , , , , ;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 99;
}

.cursor {
  min-width: 8px;
  min-height: 8px;
  background-color: var(--initial);
  border-radius: 50%;
  transition: 0.4s;
}

.content {
  width: 100%;
  max-width: 1000px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.cards {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px
  transform: translateZ(0);
}

.card {
  position: relative;
  display: flex;
  overflow: hidden;
  height: 200px;
  min-width: 224px;
  padding: 32px;
  margin: 0;
  flex-flow: column;
  justify-content: space-between;
  flex: 1 1 0%;
  background-color: rgba(0,0,0,0.05);
  cursor: pointer;
  transition: scale 0.15s, border 0.2s ease-in, background-color 0.8s;
}

@media screen and (min-width: 914px) {
  .card:nth-child(1), .card:nth-child(2), .card:nth-child(3) {
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }
  .card:nth-child(1), .card:nth-child(2), .card:nth-child(4), .card:nth-child(5) {
    border-right: 1px solid rgba(0,0,0,0.2);
  }
}

@media screen and (max-width: 913px) and (min-width: 615px) {
  .card:nth-child(1), .card:nth-child(2), .card:nth-child(3), .card:nth-child(4) {
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }
  .card:nth-child(1), .card:nth-child(3), .card:nth-child(5) {
    border-right: 1px solid rgba(0,0,0,0.2);
  }
}

@media screen and (max-width: 614px) {
  .content {
    padding: 24px 24px;
  }
  .card:nth-child(1), .card:nth-child(2), .card:nth-child(3), .card:nth-child(4), .card:nth-child(5) {
    border-bottom: 1px solid rgba(0,0,0,0.2);
  }
}

.card > * {
  pointer-events: none;
}

.inner-shadow {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  mix-blend-mode: plus-lighter;
}

.cursor-blur-wrapper {
  position: absolute;
  left: -50%;
  top: -50%;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.cursor-blur {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--initial);
}

h1 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 56px;
  color: rgba(0,0,0,0.3);
  transition: 0.2s;
}
.card:hover h1 {
  color: rgba(0,0,0,1);
}


p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  color: rgba(0,0,.........完整代码请登录后点击上方下载按钮下载查看