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

已于 2023-10-05 18:15:42 修改
阅读量1.9w 收藏 4
点赞数 4
分类专栏： js拒绝者联盟 文章标签： 前端 纯css 纯css3D跟随鼠标 纯css3D跟随鼠标运动 纯css3D跟随鼠标倾斜 css倾斜动画 纯css3D跟随鼠标动画
于 2023-10-05 18:14:07 首次发布
CSDN_Qayrup
本文链接：https://blog.csdn.net/weixin_44368963/article/details/133582606
版权

老规矩先上图

在这里插入图片描述

为什么今天会想起来整这个呢?这是因为和我朋友吵架,
就是关于这个效果的,就是这个 卡片懸停毛玻璃效果,

我朋友认为纯css也能写,

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

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

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

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

遵循开源精神,源码如下

<!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>
Qayrup
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
html5 CSS3心形动画跟随鼠标光标运动特效.zip
07-11
代码片段： this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // Move points over time _this.radians = _this.velocity; // Drag effect _this.lastMouse.x = (mouse.x - _this.lastMouse.x) * 0.05; _this.lastMouse.y = (mouse.y - _this.lastMouse.y) * 0.05; // Circular Motion _this.distanceFromCenter.x = _this.prevDistanceFromCenter.x Math.sin(_this.radians) * 100; _this.distanceFromCenter.y = _this.prevDistanceFromCenter.x Math.sin(_this.radians) * 100; _this.x = _this.lastMouse.x Math.cos(_this.radians) * _this.distanceFromCenter.x; _this.y = _this.lastMouse.y Math.sin(_this.radians) * _this.distanceFromCenter.y; _this.draw(lastPoint); };
js+css3图片3D倾斜布局点击弹窗放大预览代码
12-30
一款挺有创意的js+css3图片3D倾斜布局点击弹窗放大预览代码，图片放大幻灯片切换展示。学习交流。
鼠标悬停效果
qq_40351096的博客
09-26 504
鼠标悬停，点击效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> button{ border: 0; } img{
艰难学习codepen：鼠标移动卡片旋转
weixin_46727994的博客
11-04 149
选自codepen鼠标移动旋转卡片 加底 变成这样 改字体样式最顶层，再塞一层 调整字体，css就没了
css3卡牌炫酷3d排列展示_CSS3炫酷鼠标滑过卡片3D翻转特效
weixin_39980347的博客
12-23 285
这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时，图片被在3D空间中倾斜，当顶部滑过图片的时候，卡片平滑过渡到正常位置，卡片上的图片被缩小，同时显示出说明文字和一些链接图标。制作方法HTML结构该3D卡片翻转特效的HTML结构使用HTML5 元素，卡片的文字说明和链接图标使用元素来制作。 Hover Design Interaction......CSS样式首先...
CSSDiv依次进入3d倾斜效果+鼠标悬浮
qq_39654101的博客
07-20 313
img src="~/images/读者管理.png" width="300px" height="45%" />
css3图片悬浮倾斜交互式动画js特效
ICode联盟
08-12 237
css3图片悬浮倾斜交互式动画特效，在鼠标悬停到一组图片上面时，图片会根据鼠标所在位置发生倾斜，并且旋转的角度始终根据鼠标所在位置而变化。
CSS3鼠标聚焦图片时，图片360度旋转
weixin_69454278的博客
05-14 371
【代码】CSS3鼠标聚焦图片时，图片360度旋转。
更着鼠标移动倾斜的html效果,带视觉倾斜效果的鼠标悬停卡片动画特效
weixin_39998859的博客
06-03 447
这是一款带视觉倾斜效果的鼠标悬停卡片动画特效。该特效通过js和css3代码，使鼠标悬停在一张图片卡片上面时，卡片会根据鼠标的方向进行3d倾斜.使用方法HTML结构01. Normal02. Reverse03. NormalCSS样式*,*::after,*::before {margin: 0;padding: 0;box-sizing: border-box;}html {font-size:...
H5C3 第三天 CSS3中2D和3D的使用
zws977207074的博客
08-24 44
transform 是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放、甚至支持矩阵方式，配合过度和即将学习的的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）(动画交替反向运行)skew（-30deg，0）：是表示只在X轴(方向)倾斜，顺时针旋转。skew（30deg，0）：是表示只在X轴(方向)倾斜，逆时针旋转。skew（0，30deg）：是表示只在Y轴(方向)倾斜，顺时针旋转。
纯css3人物头像鼠标跟随动画效果
07-31
纯css人物头像鼠标跟随动画效果是一款鼠标移动可以控制人物头像跟眼睛转动特效。
纯CSS3鼠标经过文字倾斜线性动画特效
09-08
纯CSS3鼠标经过文字倾斜线性动画特效
纯css实现3D图像轮转效果
09-24
主要为大家详细介绍了纯css实现3D图像轮转效果，css制作的3D图像轮转，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯CSS实现3D按钮效果实例代码
09-24
本篇文章主要介绍了纯CSS实现3D按钮效果实例代码，css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。有兴趣的可以了解一下。
VUE:实现随鼠标移动旋转的3D卡片
最新发布
qq_45820271的博客
01-30 530
使用VUE实现卡片的3D旋转，将鼠标移入后计算鼠标的位置计算角度，使用perspective() rotateY() rotateX()实现旋转
CSS实现鼠标滑过卡片上浮效果
no_waw的博客
04-28 3464
CSS实现鼠标滑过卡片上浮效果
CSS 3.0实现卡片悬停立体特效
越陌度阡
06-20 3347
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效，效果如下： 以下是代码实现，欢迎大家制复粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
第4关：CSS3 旋转和倾斜
weixin_67272154的博客
04-26 935
主页
CSS3 2D变形 3D变形 过渡 动画
xiangxiongfly
07-21 2936
在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。
css实现菜单下划线跟随鼠标
11-23
要实现菜单下划线跟随鼠标的效果，可以使用CSS中的伪类和过渡效果。具体步骤如下： 1. 在HTML中，创建一个菜单列表。每个菜单项都需要一个唯一的类名或ID，以便在CSS中进行定位。 2. 在CSS中，使用伪类选择器:hover来选择鼠标悬停的菜单项。例如，如果菜单项的类名为"menu-item"，那么可以使用".menu-item:hover"来选择悬停的菜单项。 3. 给:hover选择器的菜单项添加下划线效果。可以使用text-decoration属性设置下划线，并使用颜色属性设置下划线的颜色。 4. 使用transition属性为下划线添加过渡效果。例如，可以设置transition：width 0.3s ease-in-out，表示下划线的宽度在0.3秒内以渐变的方式变化。 5. 在:hover选择器的菜单项中，添加一个伪元素::after。这个伪元素将用于绘制下划线。可以使用content属性添加一个空内容，并设置宽度、高度、背景颜色等样式。 6. 使用position属性将伪元素定位在菜单项的底部。可以使用绝对定位position: absolute，并设置top和left属性来定位伪元素。 7. 设置伪元素的宽度，可以使用transform属性的scaleX()函数来设置伪元素的宽度与菜单项的宽度一致。 8. 最后，使用transition属性为伪元素的宽度添加过渡效果，与菜单项下划线宽度的过渡效果相呼应。 通过以上步骤，即可实现菜单下划线跟随鼠标的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Qayrup

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值