loading窗口动画 web_4个漂亮的CSS3 Loading预加载动画实例

最新推荐文章于 2024-08-28 21:26:11 发布
最新推荐文章于 2024-08-28 21:26:11 发布
阅读量166 收藏
点赞数
文章标签： loading窗口动画 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39929254/article/details/111545518
版权

本文介绍4个漂亮的CSS3 Loading预加载动画实例。

实例一

css代码#preloader_2{

position: relative;

left: 50%;

width: 40px;

height: 40px;

}

#preloader_2 span{

display:block;

bottom:0px;

width: 20px;

height: 20px;

background:#9b59b6;

position:absolute;

}

#preloader_2 span:nth-child(1){

-webkit-animation: preloader_2_1 1.5s infinite ease-in-out;

-moz-animation: preloader_2_1 1.5s infinite ease-in-out;

-ms-animation: preloader_2_1 1.5s infinite ease-in-out;

animation: preloader_2_1 1.5s infinite ease-in-out;

}

#preloader_2 span:nth-child(2){

left:20px;

-webkit-animation: preloader_2_2 1.5s infinite ease-in-out;

-moz-animation: preloader_2_2 1.5s infinite ease-in-out;

-ms-animation: preloader_2_2 1.5s infinite ease-in-out;

animation: preloader_2_2 1.5s infinite ease-in-out;

}

#preloader_2 span:nth-child(3){

top:0px;

-webkit-animation: preloader_2_3 1.5s infinite ease-in-out;

-moz-animation: preloader_2_3 1.5s infinite ease-in-out;

-ms-animation: preloader_2_3 1.5s infinite ease-in-out;

animation: preloader_2_3 1.5s infinite ease-in-out;

}

#preloader_2 span:nth-child(4){

top:0px;

left:20px;

-webkit-animation: preloader_2_4 1.5s infinite ease-in-out;

-moz-animation: preloader_2_4 1.5s infinite ease-in-out;

-ms-animation: preloader_2_4 1.5s infinite ease-in-out;

animation: preloader_2_4 1.5s infinite ease-in-out;

}

@-webkit-keyframes preloader_2_1 {

0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}

80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-webkit-keyframes preloader_2_2 {

0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}

80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-webkit-keyframes preloader_2_3 {

0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}

80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}

100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-webkit-keyframes preloader_2_4 {

0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}

80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}

100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-moz-keyframes preloader_2_1 {

0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}

80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-moz-keyframes preloader_2_2 {

0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}

80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-moz-keyframes preloader_2_3 {

0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}

80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}

100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-moz-keyframes preloader_2_4 {

0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}

80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}

100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-ms-keyframes preloader_2_1 {

0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}

80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-ms-keyframes preloader_2_2 {

0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}

80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-ms-keyframes preloader_2_3 {

0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}

80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}

100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-ms-keyframes preloader_2_4 {

0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}

80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}

100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-keyframes preloader_2_1 {

0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}

80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-keyframes preloader_2_2 {

0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}

80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

@-keyframes preloader_2_3 {

0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}

50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}

80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}

100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}

}

@-keyframes preloader_2_4 {

0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}

50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}

80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}

100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}

}

html代码

实例二

css代码#preloader_3{

position:relative;

}

#preloader_3:before{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#9b59b6;

-webkit-animation: preloader_3_before 1.5s infinite ease-in-out;

-moz-animation: preloader_3_before 1.5s infinite ease-in-out;

-ms-animation: preloader_3_before 1.5s infinite ease-in-out;

animation: preloader_3_before 1.5s infinite ease-in-out;

}

#preloader_3:after{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#2ecc71;

left:22px;

-webkit-animation: preloader_3_after 1.5s infinite ease-in-out;

-moz-animation: preloader_3_after 1.5s infinite ease-in-out;

-ms-animation: preloader_3_after 1.5s infinite ease-in-out;

animation: preloader_3_after 1.5s infinite ease-in-out;

}

@-webkit-keyframes preloader_3_before {

0% {-webkit-transform: translateX(0px) rotate(0deg)}

50% {-webkit-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

100% {-webkit-transform: translateX(0px) rotate(0deg)}

}

@-webkit-keyframes preloader_3_after {

0% {-webkit-transform: translateX(0px)}

50% {-webkit-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

100% {-webkit-transform: translateX(0px)}

}

@-moz-keyframes preloader_3_before {

0% {-moz-transform: translateX(0px) rotate(0deg)}

50% {-moz-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

100% {-moz-transform: translateX(0px) rotate(0deg)}

}

@-moz-keyframes preloader_3_after {

0% {-moz-transform: translateX(0px)}

50% {-moz-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

100% {-moz-transform: translateX(0px)}

}

@-ms-keyframes preloader_3_before {

0% {-ms-transform: translateX(0px) rotate(0deg)}

50% {-ms-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

100% {-ms-transform: translateX(0px) rotate(0deg)}

}

@-ms-keyframes preloader_3_after {

0% {-ms-transform: translateX(0px)}

50% {-ms-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

100% {-ms-transform: translateX(0px)}

}

@keyframes preloader_3_before {

0% {transform: translateX(0px) rotate(0deg)}

50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

100% {transform: translateX(0px) rotate(0deg)}

}

@keyframes preloader_3_after {

0% {transform: translateX(0px)}

50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

100% {transform: translateX(0px)}

}

html代码

实例三

css代码#preloader_4{

position:relative;

}

#preloader_4 span{

position:absolute;

width:20px;

height:20px;

background:#3498db;

opacity:0.5;

border-radius:20px;

-webkit-animation: preloader_4 1s infinite ease-in-out;

-moz-animation: preloader_4 1s infinite ease-in-out;

-ms-animation: preloader_4 1s infinite ease-in-out;

-animation: preloader_4 1s infinite ease-in-out;

}

#preloader_4 span:nth-child(2){

left:20px;

-webkit-animation-delay: .2s;

-moz-animation-delay: .2s;

-ms-animation-delay: .2s;

animation-delay: .2s;

}

#preloader_4 span:nth-child(3){

left:40px;

-webkit-animation-delay: .4s;

-moz-animation-delay: .4s;

-ms-animation-delay: .4s;

animation-delay: .4s;

}

#preloader_4 span:nth-child(4){

left:60px;

-webkit-animation-delay: .6s;

-moz-animation-delay: .6s;

-ms-animation-delay: .6s;

animation-delay: .6s;

}

#preloader_4 span:nth-child(5){

left:80px;

-webkit-animation-delay: .8s;

-moz-animation-delay: .8s;

-ms-animation-delay: .8s;

animation-delay: .8s;

}

@-webkit-keyframes preloader_4 {

0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

50% {opacity: 1; -webkit-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100%  {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

@-moz-keyframes preloader_4 {

0% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

50% {opacity: 1; -moz-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100%  {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

@-ms-keyframes preloader_4 {

0% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

50% {opacity: 1; -ms-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100%  {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

@keyframes preloader_4 {

0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

html代码

实例四

css代码#preloader6{

position:relative;

width: 42px;

height: 42px;

-webkit-animation: preloader_6 5s infinite linear;

-moz-animation: preloader_6 5s infinite linear;

-ms-animation: preloader_6 5s infinite linear;

animation: preloader_6 5s infinite linear;

}

#preloader6 span{

width:20px;

height:20px;

position:absolute;

background:red;

display:block;

-webkit-animation: preloader_6_span 1s infinite linear;

-moz-animation: preloader_6_span 1s infinite linear;

-ms-animation: preloader_6_span 1s infinite linear;

animation: preloader_6_span 1s infinite linear;

}

#preloader6 span:nth-child(1){

background:#2ecc71;

}

#preloader6 span:nth-child(2){

left:22px;

background:#9b59b6;

-webkit-animation-delay: .2s;

-moz-animation-delay: .2s;

-ms-animation-delay: .2s;

animation-delay: .2s;

}

#preloader6 span:nth-child(3){

top:22px;

background:#3498db;

-webkit-animation-delay: .4s;

-moz-animation-delay: .4s;

-ms-animation-delay: .4s;

animation-delay: .4s;

}

#preloader6 span:nth-child(4){

top:22px;

left:22px;

background:#f1c40f;

-webkit-animation-delay: .6s;

-moz-animation-delay: .6s;

-ms-animation-delay: .6s;

animation-delay: .6s;

}

@-webkit-keyframes preloader_6 {

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

@-webkit-keyframes preloader_6_span {

0% { -webkit-transform:scale(1); }

50% { -webkit-transform:scale(0.5); }

100% { -webkit-transform:scale(1); }

}

@-moz-keyframes preloader_6 {

from {-moz-transform: rotate(0deg);}

to {-moz-transform: rotate(360deg);}

}

@-moz-keyframes preloader_6_span {

0% { -moz-transform:scale(1); }

50% { -moz-transform:scale(0.5); }

100% { -moz-transform:scale(1); }

}

@-ms-keyframes preloader_6 {

from {-ms-transform: rotate(0deg);}

to {-ms-transform: rotate(360deg);}

}

@-ms-keyframes preloader_6_span {

0% { -ms-transform:scale(1); }

50% { -ms-transform:scale(0.5); }

100% { -ms-transform:scale(1); }

}

@-ms-keyframes preloader_6 {

from {-ms-transform: rotate(0deg);}

to {-ms-transform: rotate(360deg);}

}

@keyframes preloader_6_span {

0% { transform:scale(1); }

50% { transform:scale(0.5); }

100% { transform:scale(1); }

}

html代码

相关文章推荐

weixin_39929254
关注
纯CSS3实现8款超好看的Loading加载动画特效
02-19
纯CSS3实现8款Loading加载动画特效，可以比拟gif动画效果的8个创新绿色Loading加载特效，动画效果非常漂亮。 这是一款非常不错的导航菜单，鼠标悬停导航上面文章内容遮罩变暗，鼠标离开文章高亮显示。
CSS3实现超好看的加载动画
CreatorRay的博客
03-04 560
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 在任何项目都中会出现需要加载的数据的场景，大多数都会给一个loading的交互提示，这期我们就做一个超级好看炫酷的加载动画。大家可以封装一下，进行复用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.
纯CSS实现炫酷的加载动画：简单高效的技巧分享
最新发布
阿里渣渣java研发组-群主
08-28 1410
纯CSS加载动画不仅实现简单，且性能优异，适用于各种Web应用场景。本文分享的几种炫酷加载动画可以直接应用于你的项目，或作为灵感进行更复杂的自定义设计。
3款漂亮的CSS3 Loading动画实例教程
iteye_8029的博客
05-01 132
Hello，亲们，这次让我来带着大家去创建3个非常漂亮的CSS3 Loading动画吧。我没记错的话这个CSS3 Loading动画只能运行在firefox、chrome和safari浏览器上，你还在等什么，赶紧往下看吧！ VIEW DEMO 第1个CSS3 Loading动画例子 HTML 第1个例子中的HTML标记非常简单，我们在页面上创建了一个ul列表标记，并在其内部...
css 加载中效果的动画
PrimaryColor
09-09 186
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ..
28个非常漂亮的css3制作的loading动画
05-27
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
30款酷炫的css3预加载loading动画源码
10-28
在网页设计中，预加载（loading）动画是一个重要的组成部分，它在用户等待内容完全加载时提供视觉反馈，提升用户体验。本资源提供了30款利用CSS3实现的酷炫加载动画源码，每款都有独特的设计和动画效果。下面将详细...
CSS3 Loading加载动画合集下载.rar
10-01
总结来说，"CSS3 Loading加载动画合集下载.rar"是一个极好的学习资源，它集合了多种CSS3 Loading动画效果，不仅展示了CSS3的强大功能，也为开发者提供了实践和创新的机会。无论是初学者还是有经验的开发者，都可以...
5个可爱的CSS3 Loading加载动画.zip
01-07
本压缩包包含的“5个可爱的CSS3 Loading加载动画”就是一个很好的实例，展示了CSS3在实现动态界面方面的强大能力。 1. **HTML5基础**：HTML5是构建网页内容的基础，它提供了一系列新的元素和API，使网页结构更清晰...
css3齿轮loading动画特效
12-13
总结来说，"CSS3齿轮loading动画特效"是一个集成了CSS3动画、Font Awesome图标库和伪元素技术的优秀实例，它展示了如何通过纯CSS实现复杂的动态效果，提升了网页的交互体验。在实际项目中，开发者可以根据需求调整...
jQuery+CSS3 loading文字加载动画特效
06-10
加载动画的核心部分在于CSS3的`@keyframes`规则，它定义了一个动画的过程，从起始状态到结束状态的每一帧。在这个特效中，我们将创建一个关键帧动画，使得文字元素在每一帧中都进行不同的变换，从而呈现出动态的加载...
多款漂亮的CSS3 Loading图标加载动画特效.zip
07-11
代码片段： <div id="ajaxwave1">   <div id="pointcircle1" class="pointcircle"></div>   <div id="pointcircle2" class="pointcircle"></div>   <div id="pointcircle3" class="pointcircle"></div>   <div id="pointcircle4" class="pointcircle"></div>   <div id="pointcircle5" class="pointcircle"></div> </div>
纯CSS3加载动画（完整版）
08-29
纯CSS3加载动画（完整版）
CSS3蓝色Loading加载动画特效.zip
07-11
代码简介：CSS3蓝色Loading加载动画特效是一款非常清爽好看的页面加载动画特效下载。
超酷的css3样式图片上传加载（Loading）动画图标
04-08
超酷的css3样式图片上传加载（Loading）动画图标
css加载中动画
程序员
08-19 342
css加载中动画
CSS 加载中动画
特创数字
12-30 892
CSS 加载中动画
加载中的css动画
老实敲代码，佛只渡有缘人
07-17 256
css实现加载中动画
纯CSS3打造非常炫的加载动画
ICode联盟
12-08 151
下载地址 代码非常简单。没有用任何javascript代码。纯css3实现。/* Animation */.rotate { -webkit-animation: rotateTriangle 3s linear infinite; animation: rotateTriangle 3s linear infinite;}@-webkit-keyframes rotateTriangle { from { -webkit-transform: rotate(0deg); } to { -webkit-t
CSS3预加载动画特效：创新的网页加载体验
资源中CSS3预加载Loading动画特效即是前端开发中的一个实例，它涉及到了前端工程师对页面加载过程中的用户体验优化。 3. JavaScript：JavaScript是一种高级的、解释型的编程语言，它可以嵌入HTML页面中，使页面具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值