纯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>
相关推荐
懒大王爱吃狼42 分钟前
Python教程：python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1：npm简介
前端·npm·node.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play