设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › CSS卡片悬停交互动画(附源代码)
返回列表 发新帖
查看: 60|回复: 0

CSS卡片悬停交互动画(附源代码)

[复制链接]
yycvip

94

主题

36

回帖

849

积分

管理员

积分
849
发表于 2024-11-5 20:25:33 | 显示全部楼层 |阅读模式
640.gif


这是一个CSS实现的卡片悬停交互效果，当鼠标悬停在卡片上时，会出现一个随着鼠标移动而移动的光圈。

主要实现原理是通过JavaScript获取鼠标的X/Y轴坐标，并使用CSS的radial-gradient函数和自定义属性来动态更新光圈的位置，从而创建出这种交互效果。

源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5.   :root {
  6.   --bg-color: rgb(20, 20, 20);
  7.   --card-color: rgb(23, 23, 23);
  8. }

  10. body {
  11.   align-items: center;
  12.   background-color: var(--bg-color);
  13.   display: flex;
  14.   height: 100vh;
  15.   justify-content: center;
  16.   margin: 0px;
  17.   overflow: hidden;
  18.   padding: 0px;
  19. }

  21. #cards {
  22.   display: flex;
  23.   flex-wrap: wrap;
  24.   gap: 8px;  
  25.   max-width: 916px;
  26.   width: calc(100% - 20px);
  27. }

  29. #cards:hover > .card::after {
  30.   opacity: 1;
  31. }

  33. .card {
  34.   background-color: rgba(255, 255, 255, 0.1);
  35.   border-radius: 10px;
  36.   cursor: pointer;
  37.   display: flex;
  38.   height: 260px;
  39.   flex-direction: column;
  40.   position: relative;
  41.   width: 300px;  
  42. }

  44. .card::before {
  45.   background: radial-gradient(
  46.     800px circle at var(--mouse-x) var(--mouse-y),
  47.     rgba(255, 255, 255, 0.06),
  48.     transparent 40%
  49.   );
  50.   z-index: 3;
  51. }


  54. .card:hover::before{
  55.   opacity: 1;
  56. }

  58. .card::before,
  59. .card::after {
  60.   border-radius: inherit;
  61.   content: "";
  62.   height: 100%;
  63.   left: 0px;
  64.   opacity: 0;
  65.   position: absolute;
  66.   top: 0px;
  67.   transition: opacity 500ms;
  68.   width: 100%;
  69. }

  71. .card::before {
  72.   background: radial-gradient(
  73.     800px circle at var(--mouse-x) var(--mouse-y),
  74.     rgba(255, 255, 255, 0.06),
  75.     transparent 40%
  76.   );
  77.   z-index: 3;
  78. }

  80. .card::after {  
  81.   background: radial-gradient(
  82.     600px circle at var(--mouse-x) var(--mouse-y),
  83.     rgba(255, 255, 255, 0.3),
  84.     transparent 40%
  85.   );
  86.   z-index: 1;
  87. }

  89. .card > .card-content {
  90.   background-color: var(--card-color);
  91.   border-radius: inherit;
  92.   display: flex;
  93.   flex-direction: column;
  94.   flex-grow: 1;
  95.   inset: 1px;
  96.   padding: 10px;
  97.   position: absolute;
  98.   z-index: 2;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103.   <div id="cards">
  104.   <div class="card">
  105.     <div class="card-content"></div>
  106.   </div>
  107.    <div class="card">
  108.     <div class="card-content"></div>
  109.   </div>
  110.   <div class="card">
  111.     <div class="card-content"></div>
  112.   </div>
  113. </div>
  114. </body>
  115. <script>
  116. document.getElementById("cards").onmousemove = e => {
  117.   for(const card of document.getElementsByClassName("card")) {
  118.     const rect = card.getBoundingClientRect(),
  119.           x = e.clientX - rect.left,
  120.           y = e.clientY - rect.top;

  122.     card.style.setProperty("--mouse-x", `${x}px`);
  123.     card.style.setProperty("--mouse-y", `${y}px`);
  124.   };
  125. }
  126. </script>
  127. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表