css实现 10种鼠标移入按钮动效

最新推荐文章于 2024-06-07 13:59:56 发布
最新推荐文章于 2024-06-07 13:59:56 发布
阅读量2.8k 收藏 9
点赞数 2
分类专栏： CSS 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43883485/article/details/107645369
版权

html代码

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>按钮背景动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
</head>

<body>
    <div class="box">
        <div class="title">鼠标移入按钮多种动效</div>
        <div class="btn-list">
            <ul>
                <li>
                    <a class="btn btn1" href="javascript:;"><span>鼠标移入</span>
                        <div class="btnbg"></div>
                    </a>
                    <a class="btn btn2" href="javascript:;"><span>鼠标移入</span>
                        <div class="btnbg"></div>
                    </a>
                    <a class="btn btn3" href="javascript:;"><span>鼠标移入</span>
                        <div class="btnbg"></div>
                    </a>
                    <a class="btn btn4" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                        <div class="btnbg3"></div>
                        <div class="btnbg4"></div>
                    </a>
                    <a class="btn btn5" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                    </a>
                    <a class="btn btn6" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                        <div class="btnbg3"></div>
                        <div class="btnbg4"></div>
                    </a>
                    <a class="btn btn7" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                    </a>
                    <a class="btn btn8" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                    </a>
                    <a class="btn btn9" href="javascript:;">
                        <span>鼠标移入</span>
                        <div class="btnbg1"></div>
                        <div class="btnbg2"></div>
                        <div class="btnbg3"></div>
                        <div class="btnbg4"></div>
                    </a>
                    <a class="btn btn10" href="javascript:;"><span>鼠标移入</span>
                        <div class="btnbg"></div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

css代码

*{
    margin: 0;
    padding: 0;
}
ul, li{
    list-style: none;
}
a{
    color: #ccc;
    text-decoration: none;
}
.box{
    background: #30303c;
    width: 100%;
    height: 100%;
}
.title{
    color: #fff;
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
}
.btn-list{
    margin: 50px auto;
    width: 800px;
}

.btn{
    padding: 10px 40px;
    font-size: 14px;
    overflow: hidden;
    display: inline-block;
    margin: 7px;
}

/* 1 */
.btn1{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all 0.5s; /* 过度 */
    -moz-transition: all 0.5s; /* Firefox */
    -webkit-transition: all 0.5s; /* Safari 和 Chrome */
}
.btn1 .btnbg{
    position: absolute; /* 绝对 */
    left: 50%;
    width: 0;
    top: 0;
    bottom: 0;
    transition: all 0.5s; /* 过度 */
    -moz-transition: all 0.5s; /* Firefox */
    -webkit-transition: all 0.5s; /* Safari 和 Chrome */
    background: #f55336;
}
.btn1:hover{
    border-color: #f55336;
    color: #fff;
}
.btn1:hover .btnbg{
    width: 100%;
    left: 0;
}
.btn1 span{
    position: relative;
    z-index: 1;
}

/* 2 */
.btn2{
    /* transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 */
    /* translateZ(z) 定义 3D 转换，只是用 Z 轴的值 */
    /* perspective(n) 为 3D 转换元素定义透视视图 */
    transform: perspective(1px) translateZ(0);
    -webkit-transform: perspective(1px) translateZ(0);
    /* transition-property 属性规定应用过渡效果的 CSS 属性的名称 */
    transition-property: color;
    -webkit-transition-property: color;
    transition-duration: 0.5s; /* 过渡效果持续多长时间 */
    -webkit-transition-duration: 0.5s;
    border: 1px solid #ccc;
    position: relative; /* 相对 */
}
.btn2:hover{
    border-color: #ffca28;
    color: #fff;
}
.btn2 .btnbg{
    background: #ffca28;
    position: absolute;
    z-index: -1;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    /* 通过设置 X 轴的值来定义缩放转换 */
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    /* 允许改变被转换元素的位置 */
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    /* 过渡效果持续 */
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    /* 规定过渡效果的速度曲线 */
    /* ease-out 以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） */
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
}
.btn2:hover .btnbg{
    /* 规定过渡效果的速度曲线 */
    /* ease-out 以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） */
    transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
    -webkit-transition-timing-function: cubic-bezier(0.52,1.64,0.37,0.66);
    /* scaleX 表示水平方向缩放的倍数 */
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: 1;
    filter: alpha(opacity=100);
}

/* 3 */
.btn3{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: border-color .3s, color .3s;
    -webkit-transition: border-color .3s, color .3s;
    /* 规定过渡效果的速度曲线 */
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
}
.btn3:hover{
    color: #fff;
    border-color: #d500f9;
}
.btn3 .btnbg{
    background: #d500f9;
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    filter: alpha(opacity=0);
    /* 旋转 div 元素 */
    transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0);
    -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0);
    /* 设置旋转元素的基点位置 */
    transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    transition: transform .3s, opacity .3s;
    -webkit-transform: -webkit-transform .3s, opacity .3s;
}
.btn3:hover .btnbg{
    opacity: 1;
    filter: alpha(opacity=100);
    /* 旋转 div 元素 */
    transform: rotate3d(0,0,1,0deg);
    -webkit-transform: rotate3d(0,0,1,0deg);
    /* 规定过渡效果的速度曲线 */
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
}
.btn3 span{
    position: relative;
    z-index: 2;
}

/* 4 */
.btn4{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .4s;
    -webkit-transition: all .4s;
}
.btn4:hover{
    color: #fff;
    border-color: #f06292;
}
.btn4 .btnbg1, .btn4 .btnbg2, .btn4 .btnbg3, .btn4 .btnbg4{
    background: #f06292;
    position: absolute;
    width: 25%;
    height: 0;
    /* 是一个简写属性，用于设置四个过渡属性 */
    transition: height .4s;
    -webkit-transition: height .4s;
}
.btn4 .btnbg1{
    top: 0;
    left: 0;
}
.btn4 .btnbg2{
    bottom: 0;
    left: 25%;
}
.btn4 .btnbg3{
    top: 0;
    left: 50%;
}
.btn4 .btnbg4{
    bottom: 0;
    left: 75%;
}
.btn4:hover .btnbg1, .btn4:hover .btnbg2, .btn4:hover .btnbg3, .btn4:hover .btnbg4{
    height: 100%;
}
.btn4 span{
    position: relative;
    z-index: 1;
}

/* 5 */
.btn5{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .5s;
    -webkit-transition: all .5s;
}
.btn5:hover{
    border-color: #ff5252;
    color: #fff;
}
.btn5 .btnbg1, .btn5 .btnbg2{
    content: '';
    width: 0;
    height: 0;
    /* 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 */
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    /* transparent 用来指定全透明色彩 */
    border-top-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    /* 过渡 */
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}
.btn5 .btnbg1{
    border-right-color: transparent;
    border-left-color: #ff5252;
    bottom: 0;
    left: 0;
}
.btn5 .btnbg2{
    /* transparent 用来指定全透明色彩 */
    border-left-color: transparent; 
    border-right-color: #ff5252;
    top: 0;
    right: 0;
}
.btn5:hover .btnbg1{
    border-width: 200px 0 0 200px;
}
.btn5:hover .btnbg2{
    border-width: 0 200px 200px 0;
}
.btn5 span{
    position: relative;
    z-index: 1;
}

/* 6 */
.btn6{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    /* transition过渡 */
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn6:hover{
    border-color: #40c4ff;
    color: #fff;
}
.btn6 .btnbg1, .btn6 .btnbg2, .btn6 .btnbg3, .btn6 .btnbg4{
    content: '';
    width: 0;
    height: 0;
    /* 旋转 div 元素 */
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    position: absolute;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}
.btn6 .btnbg1{
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #40c4ff;
    bottom: 0;
    left: 0;
}
.btn6 .btnbg2{
    border-top-color: #40c4ff;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    top: 0;
    left: 0;
}
.btn6 .btnbg3{
    border-top-color: transparent;
    border-right-color: #40c4ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    top: 0;
    right: 0;
}
.btn6 .btnbg4{
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #40c4ff;
    border-left-color: transparent;
    bottom: 0;
    right: 0;
}
.btn6:hover .btnbg1{
    border-width: 200px 0 0 200px;
}
.btn6:hover .btnbg2{
    border-width: 200px 200px 0 0;
}
.btn6:hover .btnbg3{
    border-width: 0 200px 200px 0;
}
.btn6:hover .btnbg4{
    border-width: 0 0 200px 200px;
}
.btn6 span{
    position: relative;
    z-index: 1;
}

/* 7 */
.btn7{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn7:hover{
    border-color: #00e676;
    color: #fff;
}
.btn7 .btnbg1, .btn7 .btnbg2{
    background: #00e676;
    position: absolute;
    top: 50%;
    top:0\9;
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 10px;
    transition: all .6s;
    -webkit-transition: all .6s;
    opacity: 0.5;
}
.btn7 .btnbg1{
    left: -20px;
    /* translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.btn7 .btnbg2{
    right: -20px;
    transform: translate(50%,-50%);
    -webkit-transform: translate(50%,-50%);
}
.btn7:hover .btnbg1{
    opacity: 1;
    animation: criss-cross-left .9s both;
    -webkit-animation: criss-cross-left .9s both;
    width: 375px\9;
    height: 375px\9;
}
.btn7:hover .btnbg2{
    opacity: 1;
    animation: criss-cross-right .9s both;
    -webkit-animation: criss-cross-right .9s both;
    width: 375px\9;
    height: 375px\9;
}
.btn7 span{
    position: relative;
    z-index: 1;
}
@keyframes criss-cross-left{
    0%{
        left: -20px;
    }
    50%{
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100%{
        left: 50%;
        width: 375px;
        height: 375px;
    }
}
@-webkit-keyframes criss-cross-left{
    0%{
        left: -20px;
    }
    50%{
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100%{
        left: 50%;
        width: 375px;
        height: 375px;
    }
}
@keyframes criss-cross-right{
    0%{
        right: -20px;
    }
    50%{
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100%{
        right: 50%;
        width: 375px;
        height: 375px;
    }
}
@-webkit-keyframes criss-cross-right{
    0%{
        right: -20px;
    }
    50%{
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100%{
        right: 50%;
        width: 375px;
        height: 375px;
    }
}

/* 8 */
.btn8{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn8:hover{
    border-color: #009688;
    color: #fff;
}
.btn8 .btnbg1, .btn8 .btnbg2{
    content: '';
    width: 0;
    height: 0;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    background: #009688;
    position: absolute;
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn8 .btnbg1{
    border-right-color: transparent;
    border-left-color: #009688;
    bottom: 0;
    left: 0;
}
.btn8 .btnbg2{
    border-right-color:#009688;
    border-left-color: transparent;
    top: 0;
    right: 0;
}
.btn8:hover .btnbg1{
    border-width: 50px 260px;
}
.btn8:hover .btnbg2{
    border-width: 50px 260px;
}
.btn8 span{
    position: relative;
    z-index: 1;
}

/* 9 */
.btn9{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn9:hover{
    border-color: #2979ff;
    color: #fff;
}
.btn9 .btnbg1, .btn9 .btnbg2, .btn9 .btnbg3, .btn9 .btnbg4{
    background: #2979ff;
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    transition: all .4s;
    -webkit-transition: all .4s;
    opacity: 0.35;
}
.btn9 .btnbg3, .btn9 .btnbg4{
    opacity: 0.75;
}
.btn9 .btnbg1{
    left: 0;
}
.btn9 .btnbg2{
    right: 0;
}
.btn9 .btnbg3{
    right: 0;
}
.btn9 .btnbg4{
    left: 0;
}
.btn9:hover .btnbg1, .btn9:hover .btnbg2, .btn9:hover .btnbg3, .btn9:hover .btnbg4{
    width: 100%;
}
.btn9:hover .btnbg3, .btn9:hover .btnbg4{
    /* 过渡效果开始前等待 0.4 秒 */
    transition-delay: .4s;
    -webkit-transition-delay: .4s;
}
.btn9 span{
    position: relative;
    z-index: 1;
}
/* 10 */
.btn10{
    border: 1px solid #ccc;
    position: relative; /* 相对 */
    transition: all .6s;
    -webkit-transition: all .6s;
}
.btn10:hover{
    border-color: #00e5ff;
    color: #fff;
}
.btn10 .btnbg{
    background: #00e5ff;
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    /* translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transition: width .6s,height .6s;
    -webkit-transition: width .6s,height .6s;
    left: 0;
    top: 0;
}
.btn10:hover .btnbg{
    width: 600px;
    height: 600px;
}
.btn10 span{
    position: relative;
    z-index: 1;
}
Twelve--
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基础css动画制作鼠标移入效果
夜近天溟的博客
06-09 4072
        这是我的第一篇文章, 算是比较基础的css效果, 如果有什么写的不好的, 希望能让各位大佬给点意见或建议.        这是一个鼠标移入的显示效果, 效果图如下:一.  首先是布局:     我们使用无序列表(当然,一般在ul之外都会套一层div包裹住), 然后里面放图片(使用img标签)和遮罩(使用div标签), 具体如下:接下来是css样式:       首先, 我们直接把全...
各种鼠标移入效果
11-25
插件描述：各种鼠标移入效果. 参考示例：http://www.jq22.com/jquery-info4782
纯CSS实现动态炫酷按钮
宇珩的博客
06-07 1231
纯CSS实现炫酷按钮
css 滑入滑出动画
锅叔的博客
10-20 2919
css 选择器及关键帧。将动画应用于页面元素。
CSS3鼠标移入效果
Tender
05-20 726
鼠标移入下划线展开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入下划线展开</title> <style type="text/css"> #underline{ width: 200px; height: 50px;
CSS 实现卡片以及鼠标移入特效
訾博（ZiBo）的博客
01-18 1300
首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。语法为卡片组件添加样式，包括卡片布局、边框、阴影等。
纯css写的评分鼠标移入的效果附图
09-25
标题中的“纯css写的评分鼠标移入的效果”指的是在网页设计中使用CSS（层叠样式表）技术实现的一种交互效果，当用户将鼠标指针悬停在评分星星上时，星星会显示为选中状态，呈现出用户正在评分的视觉反馈。...
css3实现鼠标移入 3D卡片翻转
最新发布
07-24
CSS3 实现鼠标移入 3D 卡片翻转 3D 卡片翻转效果是一种流行的网页视觉效果，常用于增强用户界面的互动性和视觉吸引力。通过 CSS3 的强大功能，我们可以轻松实现这种效果，而无需依赖复杂的 JavaScript 代码。 关键...
纯css3实现鼠标移入div图片后按钮飞入动画效果
11-04
本主题聚焦于“纯css3实现鼠标移入div图片后按钮飞入动画效果”，这是一项提升用户体验的实用技巧。下面我们将详细探讨如何运用CSS3来创建这样的动画效果。 首先，我们要明确基本的HTML结构。这个效果通常包括一个...
CSS实现鼠标上移图标旋转效果
09-24
本文将详细讲解如何使用CSS实现鼠标上移时图标旋转的效果。 首先，我们要明白CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们通过分离内容...
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
本文将详细介绍如何在Vue项目中实现鼠标移入时添加一个class样式，而鼠标移出时则移除该样式（通常是添加或移除名为"active"的class），以及相关的实现方法和拓展知识。 首先，要在Vue组件中实现鼠标移入移出的...
鼠标移入效果大全
narutozoro111的博客
11-20 270
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>cursor_CSS参考手</title> <style> .test{width:400px;border-co...
【css】鼠标移入出现不同线性框效果
mojina的博客
11-16 247
鼠标移入线性框效果
[CSS] CSS实现鼠标移入图片放大效果
热门推荐
iChangebaobao的博客
05-18 1万+
CSS实现鼠标移入图片放大效果 一般在官网比较常见这种动效，当鼠标移入图片时可以看到视觉放大的效果，这里用到一个css属性 object-fit: cover; object-fit 属性 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 .activity-content-img{ width: 100%; height: 100%;
【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线
少莫千华
06-29 3229
我们给内容添加一个黑色背景 示例 效果 将黑色背景替换成彩色渐变背景 示例 效果 宽度设置100个像素,高度设置10个像素()，此时背景是重复绘制的。 示例 效果 样式添加一个取消背景的重复绘制。 示例 效果 将背景的大小由10像素改为2像素() 示例 效果 给背景样式设置既靠左又靠下的位置() 示例 效果 将背景的宽度设置为0个像素 示例 效果 在鼠标移入内容的事件中设置背景的宽度 示例 效果 给背景大小变化事件添加一个平滑过渡。 示例 效果 给背景样式设置靠右位置() 示例 效果 鼠标移入事件触发时。添
css-鼠标移入出现遮罩层样式
xxuxioxx的博客
01-18 618
鼠标移入出现遮罩层样式
React中使用less修改界面主题 less.modifyVars
十二的博客
02-28 2926
新建两个文件一个是theme.less样式文件，一个是less.js文件，js文件的内容可以在 下载js文件 点击下载。 安装 less 和 less-loader npm i less --save npm i less-loader --save 配置环境，在webpack.config.js文件里面修改，找到css的规则，修改三个地方 'css-loader’的test： /.css$/ 改为 /.(css|less)/ 'css-loader’的 importLoaders：1改为2 .
vue3使用element-plus页面中实现卡片上下轮播，可手动切换显示，可借助插件；css 实现鼠标移入卡片动效并悬浮显示效果
06-10
关于鼠标移入卡片动效并悬浮显示效果，可以使用 CSS 的 `:hover` 伪类来实现。在示例代码中，我们在卡片的 `div` 元素上添加了一个名为 `overlay` 的遮罩层，然后通过 CSS 来控制它的透明度实现悬浮显示效果。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值