CSS小技巧

已于 2022-06-29 12:07:59 修改
阅读量218 收藏
点赞数 1
分类专栏： 前端
于 2022-06-29 02:40:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52785898/article/details/125512543
版权

CSS 过渡 动画 Grid布局 响应式设计
关键词由CSDN通过智能技术生成

CSS小技巧

文章目录

参考

动画部分

css动画

transition

实现效果

在这里插入图片描述

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

  • transition-property 用于指定动画的属性对象
  • transition-duration 指定动画时长
  • transition-timing-function 指定动画类型(linear, ease, steps……)
  • transition-delay 动画的延时
    案例代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      #root {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        transition: all 1s ease-in;
      }

      #root:hover {
        width: 200px;
        background-color: orangered;
      }
    </style>
  </head>
  <body>
    <div id="root" />
  </body>
</html>

animation

实现效果
在这里插入图片描述
animation属性详解

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

  • animation-name 指定动画
  • animation-duration 指定动画延时
  • animation-timing-function 指定动画类型
  • animation-delay 指定动画延时
  • animation-iteration-count 指定动画重复播放次数
  • animation-direction 指定动画是正方还是逆放
  • animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标
  • animation-play-state 定义一个动画是否运行或者暂停

案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        align-items: center;
        justify-content: center;
        display: flex;
      }
      .root {
        background-color: rgb(35, 46, 51);
        height: 50px;
        width: 50px;
        border-radius: 50%;
        animation-name: drop;
        animation-timing-function: linear;
        animation-duration: 5s;
        animation-iteration-count: infinite;
      }

      .root:nth-child(1) {
        animation-delay: 0s;
      }
      .root:nth-child(1) {
        animation-delay: 1s;
      }
      .root:nth-child(1) {
        animation-delay: 2s;
      }
      #warraper {
        border: 1px solid #ccc;
        animation-name: rote;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }

      @keyframes drop {
        0% {
        }
        50% {
          transform: translateY(100px);
        }
      }

      @keyframes rote {
        0% {
        }
        50% {
          transform: rotate(360deg);
          border: 10px solid orange;
          border-radius: 50%;
        }
      }
    </style>
  </head>
  <body>
    <div id="warraper">
      <div class="root" />
      <div class="root" />
      <div class="root" />
    </div>
  </body>
</html>

实现思路

在设置class为root的div直线运动的同时设置其父元素div旋转并保持两者的同步。

特殊案例

实现效果
在这里插入图片描述
素材
在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        align-items: center;
        justify-content: center;
        display: flex;
      }
      .root {
        background-image: url(https://img-blog.csdnimg.cn/20210510231707749.jpg);
        height: 180px;
        width: 123px;
        animation-name: run;
        animation-duration: 0.7s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(4);
      }

      @keyframes run {
        from {
          background-position: 0 0;
        }
        to {
          background-position: -487px 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="root" />
  </body>
</html>

实现思路

通过animation移动背景图片的位置同时设置动画类型steps实现雪人运动的特效。

按钮特效（悬浮冰冻）

实现效果
在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      button {
        border: 0;
        margin: 20px;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: bold;
        padding: 15px 50px;
        border-radius: 50px;
        color: white;
        outline: none;
        position: relative;
      }
      button::before {
        content: "";
        display: block;
        background: linear-gradient(
          to left,
          rgba(255, 255, 255, 0) 50%,
          rgba(255, 255, 255, 0.4) 50%
        );
        background-size: 210% 100%;
        background-position: right bottom;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 50px;
        transition: all 1s;
      }
      .btn1 {
        background-image: linear-gradient(to right, #25aae1, #40e495);
        box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 1);
      }

      .btn1:hover:before {
        background-position: left top;
      }
    </style>
  </head>
  <body>
    <button class="btn1">Hover me</button>
  </body>
</html>

实现思路

在这个案例中，主要的思想是通过hover来搭配伪元素的背景位置来实现类似于遮罩层，所以重点理解background-position这个属性

background-position： CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

卡片浮出

实现效果
在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #ccc;
      }
      #root {
        background-color: whitesmoke;
        width: 200px;
        height: 200px;
        cursor: pointer;
        text-align: center;
        line-height: 200px;
        border-radius: 5px;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
      }
      #root:hover {
        transform: translate(0, -5%);
        -webkit-box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
        -moz-box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
        box-shadow: 0px 6px 18px 0px rgba(50, 50, 50, 0.81);
      }
    </style>
  </head>
  <body>
    <div id="root">Hmoe</div>
  </body>
</html>

布局

Grid

grid 布局即网格布局，下面是有道的释义。

在这里插入图片描述

grid 是一个 CSS 简写属性，可以用来设置以下属性：
显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，
隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)。

属性列表

属性名作用
grid-template-rows设置行高
grid-template-columns设置列宽
grid-template-areasCSS 属性是网格区域 grid areas 在 CSS 中的特定命名。（设置元素具体的布局方式）
grid-auto-rowsgrid-auto-rows 用于指定隐式创建的行轨道大小(也就是说不被grid-template-rows所指定的元素样式)，例如元素的个数多于template指定的个数
grid-auto-rowsgrid-auto-rows 用于指定隐式创建的列轨道大小(也就是说不被grid-template-columns所指定的元素样式)，例如元素的个数多于template指定的个数
grid-auto-flow控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列
grid-column-gap控制列间距
grid-row-gap控制行间距

案例一（基础使用）

在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: whitesmoke;
      }
      #root {
        background-color: whitesmoke;
        grid-gap: 10px;
        display: grid;
        cursor: pointer;
        text-align: center;
        position: relative;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: 200px 150px;
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="item elem1" style="background: #19caad;">
        1
      </div>
      <div class="item elem2" style="background: #8cc7b5;">
        2
      </div>
      <div class="item elem3" style="background: #d1ba74;">
        3
      </div>
      <div class="item elem4" style="background: #bee7e9;">
        4
      </div>
      <div class="item elem5" style="background: #e6ceac;">
        5
      </div>
      <div class="item elem6" style="background: #ecad9e;">
        6
      </div>
    </div>
  </body>
</html>

案例二 （grid-template-areas使用）

在这里插入图片描述

案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: whitesmoke;
      }
      #root {
        background-color: whitesmoke;
        display: grid;
        cursor: pointer;
        text-align: center;
        position: relative;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: 200px 150px;
        grid-template-areas:
          "a b ."
          "a c d";
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="item elem1" style="background: #19caad; grid-area: a;">
        1
      </div>
      <div class="item elem2" style="background: #8cc7b5; grid-area: b;">
        2
      </div>
      <div class="item elem3" style="background: #d1ba74; grid-area: c;">
        3
      </div>
      <div class="item elem4" style="background: #bee7e9; grid-area: d;">
        4
      </div>
    </div>
  </body>
</html>

案例三（grid-auto-flow 使用）

本案例通过设置grid-auto-flow来调节元素的自动排序方向

在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: whitesmoke;
      }
      #root {
        display: flex;
        flex-direction: column;
      }
      #root > div {
        margin-top: 10px;
        display: grid;
        cursor: pointer;
        text-align: center;
        position: relative;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: 150px 50px;
      }
      #root > div:nth-child(2) {
        grid-auto-flow: column;
      }

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="root">
      grid-auto-flow: row;
      <div>
        <div class="item elem1" style="background: #19caad;">
          1
        </div>
        <div class="item elem2" style="background: #8cc7b5;">
          2
        </div>
        <div class="item elem3" style="background: #d1ba74;">
          3
        </div>
        <div class="item elem4" style="background: #bee7e9;">
          4
        </div>
      </div>
      grid-auto-flow: column;
      <div>
        <div class="item elem1" style="background: #19caad;">
          1
        </div>
        <div class="item elem2" style="background: #8cc7b5;">
          2
        </div>
        <div class="item elem3" style="background: #d1ba74;">
          3
        </div>
        <div class="item elem4" style="background: #bee7e9;">
          4
        </div>
      </div>
    </div>
  </body>
</html>

案例四 （grid-column、grid-row使用）

在本案例中综合使用grid-column、grid-row、grid-auto-rows,进行布局

在这里插入图片描述

案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: whitesmoke;
      }
      #root {
        background-color: whitesmoke;
        display: grid;
        cursor: pointer;
        text-align: center;
        position: relative;
        grid-template-columns: repeat(3, 200px);
        grid-auto-rows: minmax(100px, auto);
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .elem1 {
        grid-column: 1 / 2;
      }
      .elem2 {
        grid-column: 2 / 4;
      }
      .elem3 {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
      }
      .elem4 {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
      }
      .elem6 {
        grid-row: 4 / 5;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="item elem1" style="background: #19caad;">
        1
      </div>
      <div class="item elem2" style="background: #8cc7b5;">
        2
      </div>
      <div class="item elem3" style="background: #d1ba74;">
        3
      </div>
      <div class="item elem4" style="background: #bee7e9;">
        4
      </div>
      <div class="item elem5" style="background: #e6ceac;">
        5
      </div>
      <div class="item elem6" style="background: #ecad9e;">
        6
      </div>
    </div>
  </body>
</html>

分析

在这个案例中我们并没有设置grid-template-rows属性，元素的行高通过grid-auto-rows进行设置，同时设置了子元素的grid-column和grid-row进行布局。
值得注意的是：
grid-row、grid-column通过 a / b设置元素覆盖从a->b，但不包含b（a,b不能为小数）
grid-row、grid-column设置元素位置若相同，写在后面的元素会默认覆盖写在前面的元素。

案例五（auto-fit实现响应式布局）

在这里插入图片描述
案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link href="/index.css" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: whitesmoke;
      }
      #root {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        width: 100%;
        padding: 0 50px;
        display: grid;
        grid-gap: 10px 20px;
        text-align: center;
        position: relative;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: 150px 80px;
        grid-auto-rows: 100px;
        grid-auto-flow: row dense;
      }

      .item {
        display: flex;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
      }
      .elem3 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="item elem1" style="background: #19caad;">
        1
      </div>
      <div class="item elem2" style="background: #8cc7b5;">
        2
      </div>
      <div class="item elem3" style="background: #d1ba74;">
        3
      </div>
      <div class="item elem4" style="background: #bee7e9;">
        4
      </div>
    </div>
  </body>
</html>

本案例通过设置auto-fit实现行元素的响应式个数。

总结

之后遇到有意思的效果，可以继续往这个博客中添加。

程序员_yw
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css3 div跳动动画_css3闪烁跳跃动画进度条效果
weixin_39609407的博客
12-29 211
如果你的浏览器支持HTML5那应该可以看到上面的动画效果了。我们来看看html结构：这html非常简单，首先我们让ul居中、圆角、阴影。每个li顺序向左移动，而li里的div做变大缩小动画，并分配不同的透明背景。以第一个li为例代码是这样的：#progressulli:nth-child(1){-webkit-animation-delay:0.1s;-moz-animation-dela...
Vue里面css小技巧
我的博客
03-15 1774
1.给属性值赋为 unset可以清除css已设定的属性 .elementStyle { flex: unset; } 2.使用深度选择器可选中子孙元素后面的元素 三种方法 1.使用 >>> 方法 缺点可能会有兼容性问题 (不推荐) 2.使用::v-deep 方法 3.使用 /deep/ (推荐) >>>.elementStyle { height:100vh; width:10vw; } ::v-deep.elementStyle { height
css小技巧-去除图片底部空白缝隙
qq_48104836的博客
11-05 575
【代码】css小技巧-去除图片底部空白缝隙。
css 使用小技巧
wangkangyang的博客
02-21 8194
css 使用小技巧
＜ CSS小技巧：filter滤镜妙用＞
一个平平无奇的技术宅
01-12 1406
在前端开发中，所有页面都是以渲染的方式，通过HTML + CSS渲染出来的。本质来说，就是一些可以根据逻辑互动的图形元素组成，而在有些时候，我们往往需要拿我们对图片的理解去实现一些样式。为此，CSS中存在filter滤镜这个属性，去实现一些比较特殊的图形渲染方式。
CSS 小技巧：如何保留 hover 的状态？
郊眠寺
10-19 4461
下面来总结一下吧1.实现的原理就是利用，让还原的时间足够长，这样就实现了保留hove状态的效果了；2.单选效果可以在鼠标移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会被保留下来，有点类似于js中的思维；3.需要注意的是所有属性必须是支持transition的，比如就不支持transition，需要用其他样式替代；整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
CSS 小技巧：纯Css实现hover默认高亮显示
热门推荐
西门吹雪
04-10 1万+
很多人的第一反应是用js来控制样式，如果css能实现的功能，就没必要使用js啦，这里主要涉及css的。2.鼠标移出列表后仍然保留上一次的选中状态；在vue项目中，可以参考一下demo。3.默认列表的第一项为选中状态；1.鼠标滑过触发选中状态；
css小技巧——实现一个倒三角的小图标
qq_43852612的博客
07-15 872
使用css巧妙实现一些实用的小技巧。
常用的CSS小技巧
yooellie的博客
09-14 590
后续文章更新见https://github.com/yooellie/useful-common-css/blob/master/css/common.css 常用的CSS小技巧 使用自定义select select { appearance: none; -moz-appearance: none; -webkit-appearance: none...
CSS小技巧---display显隐动画效果
勤学daydayup的博客
07-16 8791
今天记录一个css小技巧 既不用setTimeout 也不用监听transitioned事件 实现display：block/none的显示隐藏动画 准备工作 dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.
css小技巧汇总
09-27
以下是一些实用的CSS小技巧，它们可以帮助开发者解决常见的布局问题，提高页面的交互性和视觉效果。 1. 隐藏记住密码后自动填充的黄色背景 在Chrome浏览器中，当用户保存密码后，下一次访问页面时，浏览器会自动...
29个常用的CSS小技巧汇总
12-13
【CSS小技巧详解】 在网页设计中，CSS（层叠样式表）是不可或缺的一部分，它负责控制网页元素的样式和布局。以下是一些常见的CSS小技巧，这些技巧可以帮助你更高效地实现各种视觉效果。 1. **清除图片下方空白间隙...
三个很特别的CSS小技巧分享
09-25
标题中提到的三个CSS小技巧，涉及了CSS中的attr()、counter()和calc()函数。这些函数在现代网页开发中提供了强大而灵活的功能，可以在不需要JavaScript的情况下实现复杂的效果。下面我将详细介绍这三个技巧。 首先...
CSS小技巧 导航中鼠标经过变换文字的实现代码
12-13
总结起来，这个CSS小技巧展示了如何通过CSS来实现一个简单的交互式导航菜单，通过鼠标悬停触发文字变换，提高了用户的互动体验。在实际的网页设计中，可以结合其他CSS3特性，如渐变、阴影、动画等，来进一步增强网页...
CSS中禁用DOM事件
bingmoujs的博客
08-26 671
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css的position定位的属性
最新发布
qq_43235503的博客
08-30 195
css的position定位的属性
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 421
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 280
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
CSS学习3
qq_54641174的博客
08-29 421
css样式表
css图片等比例缩放_【CSS小技巧】 用 CSS 实现一个宽高等比自适应容器
06-01
可以使用以下 CSS 代码实现一个宽高等比自适应容器： ```css .container { position: relative; width: 100%; padding-bottom: 75%; /* 4:3 aspect ratio */ } .container img { position: absolute; top: 0;...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值