纯css实现3D鼠标跟随倾斜

Qayrup2023-10-07 0:04

老规矩先上图

为什么今天会想起来整这个呢?这是因为和我朋友吵架,

就是关于这个效果的,就是这个 卡片懸停毛玻璃效果,

我朋友认为纯css也能写,

我则坦言他就是在放狗屁,这种跟随鼠标的3D效果要怎么可能能用纯css写,

然后吵着吵着发现,欸,好像真能用css写哦,我以前还写过这种类似的,就是这个取巧&视觉欺诈------纯css互动小飞机

然后我就来自己扇自己的脸了

原理在小飞机那写了,所以这里就不再赘述了

遵循开源精神,源码如下

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯css跟随鼠标倾斜</title>
  <style>
    @font-face {
      font-family: 'Fredoka One';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/fredokaone/v14/k3kUo8kEI-tA1RRcTZGmTlHGCac.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    *,
    :after,
    :before {
      padding: 0;
      margin: 0 auto;
      box-sizing: border-box;
    }

    body {
      background-color: #000;
      height: 100vh;
      display: grid;
      grid-template: repeat(15, 1fr)/repeat(15, 1fr);
      overflow: hidden
    }

    .cell {
      width: 100%;
      height: 100%;
      z-index: 2
    }

    .cell:nth-child(15n+1):hover~.content {
      --positionX: 0
    }

    .cell:nth-child(n+1):nth-child(-n+15):hover~.content {
      --positionY: 0
    }

    .cell:nth-child(15n+2):hover~.content {
      --positionX: 1
    }

    .cell:nth-child(n+16):nth-child(-n+30):hover~.content {
      --positionY: 1
    }

    .cell:nth-child(15n+3):hover~.content {
      --positionX: 2
    }

    .cell:nth-child(n+31):nth-child(-n+45):hover~.content {
      --positionY: 2
    }

    .cell:nth-child(15n+4):hover~.content {
      --positionX: 3
    }

    .cell:nth-child(n+46):nth-child(-n+60):hover~.content {
      --positionY: 3
    }

    .cell:nth-child(15n+5):hover~.content {
      --positionX: 4
    }

    .cell:nth-child(n+61):nth-child(-n+75):hover~.content {
      --positionY: 4
    }

    .cell:nth-child(15n+6):hover~.content {
      --positionX: 5
    }

    .cell:nth-child(n+76):nth-child(-n+90):hover~.content {
      --positionY: 5
    }

    .cell:nth-child(15n+7):hover~.content {
      --positionX: 6
    }

    .cell:nth-child(n+91):nth-child(-n+105):hover~.content {
      --positionY: 6
    }

    .cell:nth-child(15n+8):hover~.content {
      --positionX: 7
    }

    .cell:nth-child(n+106):nth-child(-n+120):hover~.content {
      --positionY: 7
    }

    .cell:nth-child(15n+9):hover~.content {
      --positionX: 8
    }

    .cell:nth-child(n+121):nth-child(-n+135):hover~.content {
      --positionY: 8
    }

    .cell:nth-child(15n+10):hover~.content {
      --positionX: 9
    }

    .cell:nth-child(n+136):nth-child(-n+150):hover~.content {
      --positionY: 9
    }

    .cell:nth-child(15n+11):hover~.content {
      --positionX: 10
    }

    .cell:nth-child(n+151):nth-child(-n+165):hover~.content {
      --positionY: 10
    }

    .cell:nth-child(15n+12):hover~.content {
      --positionX: 11
    }

    .cell:nth-child(n+166):nth-child(-n+180):hover~.content {
      --positionY: 11
    }

    .cell:nth-child(15n+13):hover~.content {
      --positionX: 12
    }

    .cell:nth-child(n+181):nth-child(-n+195):hover~.content {
      --positionY: 12
    }

    .cell:nth-child(15n+14):hover~.content {
      --positionX: 13
    }

    .cell:nth-child(n+196):nth-child(-n+210):hover~.content {
      --positionY: 13
    }

    .cell:nth-child(15n+15):hover~.content {
      --positionX: 14
    }

    .cell:nth-child(n+211):nth-child(-n+225):hover~.content {
      --positionY: 14
    }

    .content {
      --positionX: 7;
      --positionY: 7;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .content,
    .css {
      position: absolute
    }

    .css {
      font-family: Fredoka One, cursive;
      top: 50%;
      left: 50%;
      animation: color 3s linear infinite;
      text-shadow: 0 0 10px #000a;
      transition: all .5s
    }

    .css:first-child {
      font-size: 100px;
      animation-delay: 0s;
      opacity: .1;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*21px)) translateY(calc(-50% - (var(--positionY) - 7)*21px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(2) {
      font-size: 110px;
      animation-delay: -.3s;
      opacity: .2;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*18px)) translateY(calc(-50% - (var(--positionY) - 7)*18px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(3) {
      font-size: 120px;
      animation-delay: -.6s;
      opacity: .3;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*15px)) translateY(calc(-50% - (var(--positionY) - 7)*15px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(4) {
      font-size: 130px;
      animation-delay: -.9s;
      opacity: .4;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*12px)) translateY(calc(-50% - (var(--positionY) - 7)*12px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(5) {
      font-size: 140px;
      animation-delay: -1.2s;
      opacity: .5;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*9px)) translateY(calc(-50% - (var(--positionY) - 7)*9px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(6) {
      font-size: 150px;
      animation-delay: -1.5s;
      opacity: .6;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*6px)) translateY(calc(-50% - (var(--positionY) - 7)*6px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(7) {
      font-size: 160px;
      animation-delay: -1.8s;
      opacity: .7;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*3px)) translateY(calc(-50% - (var(--positionY) - 7)*3px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(8) {
      font-size: 170px;
      animation-delay: -2.1s;
      opacity: .8;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*0px)) translateY(calc(-50% - (var(--positionY) - 7)*0px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(9) {
      font-size: 180px;
      animation-delay: -2.4s;
      opacity: .9;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*-3px)) translateY(calc(-50% - (var(--positionY) - 7)*-3px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    .css:nth-child(10) {
      font-size: 190px;
      animation-delay: -2.7s;
      opacity: 1;
      transform: translateX(calc(-50% - (var(--positionX) - 7)*-6px)) translateY(calc(-50% - (var(--positionY) - 7)*-6px)) rotateX(calc(0deg - (var(--positionY) - 7)*5deg)) rotateY(calc((var(--positionX) - 7)*5deg))
    }

    @keyframes color {
      0% {
        color: #ef8f8f
      }

      10% {
        color: #efc98f
      }

      20% {
        color: #dcef8f
      }

      30% {
        color: #a3ef8f
      }

      40% {
        color: #8fefb6
      }

      50% {
        color: #8fefef
      }

      60% {
        color: #8fb6ef
      }

      70% {
        color: #a38fef
      }

      80% {
        color: #dc8fef
      }

      90% {
        color: #ef8fc9
      }

      to {
        color: #ef8f8f
      }
    }
  </style>
</head>

<body>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="content">
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
    <div class="css">Qayrup</div>
  </div>
</body>

</html>
相关推荐
卸任23 分钟前
Vibe coding工具使用心得
前端·ai编程
brien91 小时前
为什么模型标称 1M，Google Antigravity 聊到 256K 却突然失忆？我们给它做了个原生行内监控圆环
前端
修炼的dance1 小时前
录屏关键帧间隔多少合适？六档实测，2秒到10秒小了75.6%
前端
Lank_M1 小时前
关键帧从1秒拉到10秒，录屏小87.3%，摄像头小10.8%
前端
补码缩写2 小时前
用 ffprobe 拆录屏，八成字节在 29 个关键帧上
前端
百思不得小李2 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易2 小时前
Cmder 停更 17 个月，2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马2 小时前
前沿视界
前端
kyriewen2 小时前
我扫了 814 个依赖，97 个还敢要 Node 10
前端·javascript·程序员
陈随易2 小时前
3000 万人在用的翻译插件，重写一遍就是一门生意
前端·后端·程序员
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04几个好用的ip纯净度检测网站05GitHub 镜像站点06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08苹果iPA游戏软件资源下载网站09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10【SQL Server 2022】保姆级SQL Server 详细图文下载安装教程