css实现鼠标跟随聚光文字卡片交互效果代码-html代码-BFW代码库

css实现鼠标跟随聚光文字卡片交互效果代码

代码语言：html

代码描述：css实现鼠标跟随聚光文字卡片交互效果代码

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

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

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

  
  
<style>
:root {
  --color-bg: #050505;
  --color-text: #ffffff;
  --color-primary: #ff3366;
  --color-secondary: #3366ff;
  --color-tertiary: #33ddff;
  --color-accent: #ffcc00;
  --card-radius: 16px;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.5);
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.gradient-blob {
  position: absolute;
  border-radius: 100%;
  filter: blur(40px);
  opacity: 0.3;
  -webkit-animation: float 20s infinite alternate ease-in-out;
          animation: float 20s infinite alternate ease-in-out;
}

.gradient-blob:nth-child(1) {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  width: 150vw;
  height: 150vw;
  top: -100%;
  left: -25%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.gradient-blob:nth-child(2) {
  background: linear-gradient(to right, var(--color-tertiary), var(--color-secondary));
  width: 150vw;
  height: 150vw;
  bottom: -100%;
  right: -25%;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

.gradient-blob:nth-child(3) {
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
  width: 100vw;
  height: 100vw;
  top: 30%;
  left: -50%;
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

@-webkit-keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(2%, 2%) scale(1.02);
  }
  100% {
    transform: translate(-2%, -2%) scale(0.98);
  }
}

@keyframes float {
  0% {
 .........完整代码请登录后点击上方下载按钮下载查看