html 3D球状旋转标签云文字云效果

最新推荐文章于 2024-05-29 20:00:49 发布
最新推荐文章于 2024-05-29 20:00:49 发布
阅读量2.5k 收藏 24
点赞数
分类专栏： js java web 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongzhonghu/article/details/127075468
版权
js 同时被 2 个专栏收录
49 篇文章 4 订阅
订阅专栏
java web
23 篇文章 0 订阅
订阅专栏

想想一个球状的结构上面挂满了很多的标签，然后把我们要学习的内容或者是名字等3D的形式展现出来，还是非常炫酷的，这种形式的展示可能有一个名字叫做3D标签云，出于兴趣去找了一个这样的代码效果还是很可以的，给大家展示一把：

在线demo地址 

废话不多说，主要源代码如下：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <style>
      html,body{
        background-color: #060b1b;
        /* background-color: #0a192f; */
      }
    </style>
 
 

</head>

<body id="bodyid">

 
  <!-- skills 3d-->
  <section style="height: 600px;width: 100%;" id="skills" class="py-5">
    <!-- <p class="h1 mytitle pb-3">skills</p> -->
    <div id='holder'></div>
  </section>


  <!-- needful scripts -->
  <!-- Bootstrap core JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Third party plugin JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

  <!-- cloud -->
  <script src='plugins/cloud/jquery.svg3dtagcloud.min.js'></script>
  <!-- main script file -->
  <script src="js/scripts.js"></script>

</body>

</html>

jquery.svg3dtagcloud.js

/*
Copyright (c) 2017 Niklas Knaack

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

( function() {

    function SVG3DTagCloud( element, params ) {

        var settings = {

            entries: [],
            width: 480,
            height: 480,
            radius: '70%',
            radiusMin: 75,
            bgDraw: true,
            bgColor: '#000',
            opacityOver: 1.00,
            opacityOut: 0.05,
            opacitySpeed: 6,
            fov: 800,
            speed: 2,
            fontFamily: 'Arial, sans-serif',
            fontSize: '15',
            fontColor: '#fff',
            fontWeight: 'normal',//bold
            fontStyle: 'normal',//italic 
            fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            fontToUpperCase: false,
            tooltipFontFamily: 'Arial, sans-serif',
            tooltipFontSize: '15',
            tooltipFontColor: '#fff',
            tooltipFontWeight: 'normal',//bold
            tooltipFontStyle: 'normal',//italic 
            tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            tooltipFontToUpperCase: false,
            tooltipTextAnchor: 'left',
            tooltipDiffX: 0,
            tooltipDiffY: 10

        };
            
        //---

        if ( params !== undefined )
            for ( var prop in params )
                if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) )
                    settings[ prop ] = params[ prop ];

        //---

        if ( !settings.entries.length )
            return false;

        //---

        var entryHolder = [];
        var tooltip;

        var radius;
        var diameter;

        var mouseReact = true;
        var mousePos = { x: 0, y: 0 };

        var center2D;
        var center3D = { x: 0, y: 0, z: 0 };

        var speed = { x: 0, y: 0 };

        var position = { sx: 0, cx: 0, sy: 0, cy: 0 };

        var MATHPI180 = Math.PI / 180;

        var svg;
        var svgNS = 'http://www.w3.org/2000/svg';

        var bg;

        //---

        function init() {

            svg = document.createElementNS( svgNS, 'svg' );
            svg.addEventListener( 'mousemove', mouseMoveHandler );

            element.appendChild( svg );

            if ( settings.bgDraw ) {
        
                bg = document.createElementNS( svgNS, 'rect' );
                bg.setAttribute( 'x', 0 );
                bg.setAttribute( 'y', 0 );
                bg.setAttribute( 'fill', settings.bgColor );

                svg.appendChild( bg );

            }

            //---
            
            addEntries();
            reInit();
            animloop();

            //---

            window.addEventListener( 'resize', resizeHandler );

        };

        function reInit() {

            var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

            var svgWidth = windowWidth;
            var svgHeight = windowHeight;

            if ( settings.width.toString().indexOf( '%' ) > 0 || settings.height.toString().indexOf( '%' ) > 0 ) {

                svgWidth = Math.round( element.offsetWidth / 100 * parseInt( settings.width ) );
                svgHeight = Math.round( svgWidth / 100 * parseInt( settings.height ) );

            } else {

                svgWidth = parseInt( settings.width );
                svgHeight = parseInt( settings.height );

            }

            if ( windowWidth <= svgWidth )
                svgWidth = windowWidth;

            if ( windowHeight <= svgHeight )
                svgHeight = windowHeight;

            //---

            center2D = { x: svgWidth / 2, y: svgHeight / 2 };

            speed.x = settings.speed / center2D.x;
            speed.y = settings.speed / center2D.y;

            if ( svgWidth >= svgHeight )
                diameter = svgHeight / 100 * parseInt( settings.radius );
            else
                diameter = svgWidth / 100 * parseInt( settings.radius );

            if ( diameter < 1 )
                diameter = 1;

            radius = diameter / 2;

            if ( radius < settings.radiusMin ) {

                radius = settings.radiusMin;
                diameter = radius * 2;

            }

            //---

            svg.setAttribute( 'width', svgWidth );
            svg.setAttribute( 'height', svgHeight );

            if ( settings.bgDraw ) {

                bg.setAttribute( 'width', svgWidth );
                bg.setAttribute( 'height', svgHeight );

            }

            //---

            setEntryPositions( radius );

        };

        //---

        function setEntryPositions( radius ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                setEntryPosition( entryHolder[ i ], radius );

            }

        };

        function setEntryPosition( entry, radius ) {

            var dx = entry.vectorPosition.x - center3D.x;
            var dy = entry.vectorPosition.y - center3D.y;
            var dz = entry.vectorPosition.z - center3D.z;

            var length = Math.sqrt( dx * dx + dy * dy + dz * dz );

            entry.vectorPosition.x /= length;
            entry.vectorPosition.y /= length;
            entry.vectorPosition.z /= length;

            entry.vectorPosition.x *= radius;
            entry.vectorPosition.y *= radius;
            entry.vectorPosition.z *= radius;

        };

        function addEntry( index, entryObj, x, y, z ) {
            
            var entry = {};

                if ( typeof entryObj.label != 'undefined' ) {

                    entry.element = document.createElementNS( svgNS, 'text' );
                    entry.element.setAttribute( 'x', 0 );
                    entry.element.setAttribute( 'y', 0 );
                    entry.element.setAttribute( 'fill', settings.fontColor );
                    entry.element.setAttribute( 'font-family', settings.fontFamily );
                    entry.element.setAttribute( 'font-size', settings.fontSize );
                    entry.element.setAttribute( 'font-weight', settings.fontWeight );
                    entry.element.setAttribute( 'font-style', settings.fontStyle );
                    entry.element.setAttribute( 'font-stretch', settings.fontStretch );
                    entry.element.setAttribute( 'text-anchor', 'middle' );
                    entry.element.textContent = settings.fontToUpperCase ? entryObj.label.toUpperCase() : entryObj.label;

                } else if ( typeof entryObj.image != 'undefined' ) {

                    entry.element = document.createElementNS( svgNS, 'image' );
                    entry.element.setAttribute( 'x', 0 );
                    entry.element.setAttribute( 'y', 0 );
                    entry.element.setAttribute( 'width', entryObj.width );
                    entry.element.setAttribute( 'height', entryObj.height );
                    entry.element.setAttribute( 'id', 'image_' + index );
                    entry.element.setAttributeNS( 'http://www.w3.org/1999/xlink','href', entryObj.image );

                    entry.diffX = entryObj.width / 2;
                    entry.diffY = entryObj.height / 2;
                    
                }

                entry.link = document.createElementNS( svgNS, 'a' );
                entry.link.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', entryObj.url );
                entry.link.setAttribute( 'target', entryObj.target );
                entry.link.addEventListener( 'mouseover', mouseOverHandler, true );
                entry.link.addEventListener( 'mouseout', mouseOutHandler, true );
                entry.link.appendChild( entry.element );

                if ( typeof entryObj.tooltip != 'undefined' ) {

                    entry.tooltip = true;
                    entry.tooltipLabel = settings.tooltipFontToUpperCase ? entryObj.tooltip.toUpperCase() : entryObj.tooltip;;

                } else {

                    entry.tooltip = false;

                }

                entry.index = index;
                entry.mouseOver = false;

                entry.vectorPosition = { x:x, y:y, z:z };
                entry.vector2D = { x:0, y:0 };

            svg.appendChild( entry.link );
                
            return entry;
        
        };

        function addEntries() {

            var tooltip = false;

            for ( var i = 1, l = settings.entries.length + 1; i < l; i++ ) {

                var phi = Math.acos( -1 + ( 2 * i ) / l );
                var theta = Math.sqrt( l * Math.PI ) * phi;

                var x = Math.cos( theta ) * Math.sin( phi );
                var y = Math.sin( theta ) * Math.sin( phi );
                var z = Math.cos( phi );

                var entry = addEntry( i - 1, settings.entries[ i - 1 ], x, y, z );
                
                entryHolder.push( entry );

                if ( typeof settings.entries[ i - 1 ].tooltip != 'undefined' ) {

                    tooltip = true;

                }
            
            }

            if ( tooltip ) {

                addTooltip();

            }
        
        };

        function addTooltip() {

            tooltip = document.createElementNS( svgNS, 'text' );
            tooltip.setAttribute( 'x', 0 );
            tooltip.setAttribute( 'y', 0 );
            tooltip.setAttribute( 'fill', settings.tooltipFontColor );
            tooltip.setAttribute( 'font-family', settings.tooltipFontFamily );
            tooltip.setAttribute( 'font-size', settings.tooltipFontSize );
            tooltip.setAttribute( 'font-weight', settings.tooltipFontWeight );
            tooltip.setAttribute( 'font-style', settings.tooltipFontStyle );
            tooltip.setAttribute( 'font-stretch', settings.tooltipFontStretch );
            tooltip.setAttribute( 'text-anchor', settings.tooltipTextAnchor );
            tooltip.textContent = '';

            svg.appendChild( tooltip );

        };

        function getEntryByElement( element ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                var entry = entryHolder[ i ];

                if ( entry.element.getAttribute( 'x' ) === element.getAttribute( 'x' ) && 
                     entry.element.getAttribute( 'y' ) === element.getAttribute( 'y' ) ) {

                    return entry;

                }

            }

            return;

        };

        function highlightEntry( entry ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                var e = entryHolder[ i ];

                if ( e.index === entry.index ) {

                    e.mouseOver = true; 

                } else {

                    e.mouseOver = false; 

                }

            } 

        };

        //---

        function showTooltip( entry ) {

            if ( entry.tooltip ) {

                tooltip.setAttribute( 'x', entry.vector2D.x - settings.tooltipDiffX );
                tooltip.setAttribute( 'y', entry.vector2D.y - settings.tooltipDiffY );

                tooltip.textContent = settings.tooltipFontToUpperCase ? entry.tooltipLabel.toUpperCase() : entry.tooltipLabel;

                tooltip.setAttribute( 'opacity', 1.0 );

            }

        };

        function hideTooltip( entry ) {

            tooltip.setAttribute( 'opacity', 0.0 );

        };

        //---
            
        function render() {

            var fx = speed.x * mousePos.x - settings.speed;
            var fy = settings.speed - speed.y * mousePos.y;
            
            var angleX = fx * MATHPI180;
            var angleY = fy * MATHPI180;

            position.sx = Math.sin( angleX );
            position.cx = Math.cos( angleX );
            position.sy = Math.sin( angleY );
            position.cy = Math.cos( angleY );

            //---

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {
    
                var entry = entryHolder[ i ];

                //---

                if ( mouseReact ) {

                    var rx = entry.vectorPosition.x;
                    var rz = entry.vectorPosition.y * position.sy + entry.vectorPosition.z * position.cy;

                    entry.vectorPosition.x = rx * position.cx + rz * position.sx;
                    entry.vectorPosition.y = entry.vectorPosition.y * position.cy + entry.vectorPosition.z * -position.sy;
                    entry.vectorPosition.z = rx * -position.sx + rz * position.cx;

                }

                //---

                var scale = settings.fov / ( settings.fov + entry.vectorPosition.z );

                entry.vector2D.x = entry.vectorPosition.x * scale + center2D.x; 
                entry.vector2D.y = entry.vectorPosition.y * scale + center2D.y;
                
                //---

                if ( entry.diffX && entry.diffY ) {

                    entry.vector2D.x -= entry.diffX;
                    entry.vector2D.y -= entry.diffY;

                }

                //---

                entry.element.setAttribute( 'x', entry.vector2D.x );
                entry.element.setAttribute( 'y', entry.vector2D.y );

                //---

                var opacity;

                if ( mouseReact ) {

                    opacity = ( radius - entry.vectorPosition.z ) / diameter;

                    if ( opacity < settings.opacityOut ) {

                        opacity = settings.opacityOut;

                    }

                } else {

                    opacity = parseFloat( entry.element.getAttribute( 'opacity' ) );

                    if ( entry.mouseOver ) {

                        opacity += ( settings.opacityOver - opacity ) / settings.opacitySpeed;

                    } else {

                        opacity += ( settings.opacityOut - opacity ) / settings.opacitySpeed;

                    }

                }

                entry.element.setAttribute( 'opacity', opacity );
                
            }

            //---

            entryHolder = entryHolder.sort( function( a, b ) {

                return ( b.vectorPosition.z - a.vectorPosition.z );

            } );

        };

        //---

        window.requestAnimFrame = ( function() {

            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    function( callback ) {
                        window.setTimeout( callback, 1000 / 60 );
                    };

        } )();
            
        function animloop() {

            requestAnimFrame( animloop );

            render();

        };

        //---

        function mouseOverHandler( event ) {

            mouseReact = false;

            //---

            var entry = getEntryByElement( event.target );

            highlightEntry( entry );

            if ( entry.tooltip ) {

                showTooltip( entry );

            }

        };

        function mouseOutHandler( event ) {

            mouseReact = true;

            //---

            var entry = getEntryByElement( event.target );

            if ( entry.tooltip ) {

                hideTooltip( entry );

            }

        };

        //---

        function mouseMoveHandler( event ) {

            mousePos = getMousePos( svg, event );

        };

        function getMousePos( svg, event ) {

            var rect = svg.getBoundingClientRect();

            return { 

                x: event.clientX - rect.left, 
                y: event.clientY - rect.top 

            };

        };

        //---

        function resizeHandler( event ) {

            reInit();

        };
        
        //---

        init();
 
    };

    window.SVG3DTagCloud = SVG3DTagCloud;

} () );

if ( typeof jQuery !== 'undefined' ) {

    ( function( $ ) {

        $.fn.svg3DTagCloud = function( params ) {

            var args = arguments;

            return this.each( function() {

                if ( !$.data( this, 'plugin_SVG3DTagCloud' ) ) {

                    $.data( this, 'plugin_SVG3DTagCloud', new SVG3DTagCloud( this, params ) );

                } else {

                    var plugin = $.data( this, 'plugin_SVG3DTagCloud' );

                    if ( plugin[ params ] ) {

                        plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) );

                    } else {

                        $.error( 'Method ' +  params + ' does not exist on jQuery.svg3DTagCloud' );

                    }

                }

            } );

        };
        
    } ( jQuery ) );

}

空中湖
关注
  • 0
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
3D旋转词云
qq_44844370的博客
04-14 1448
3D旋转词云（vue） <template> <div> <svg style="background-color: black" :width="width" :height="height"> <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`"> <text :id="tag.id" :x
html5酷炫3D球形文字云动画特效
06-11
在这个"html5酷炫3D球形文字云动画特效"中，主要运用了HTML5的Canvas元素来实现一个引人注目的视觉效果。 Canvas是HTML5中的一个画布标签，通过JavaScript可以进行动态图形绘制。在这个3D球形文字云动画中，开发者...
html5 canvas文字标签云3D旋转动画特效
qq_095的博客
09-19 5509
tagcanvas.min.js下载 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &l...
三维地图SVG矢量图标立体标绘效果
最新发布
空间处理技术学习与研究
05-29 143
在三维地图上增加SVG矢量图标，实现立体图标标绘效果。4）矢量数据上图，可缩放编辑，可扩展性强。三维地图引擎：wwj。2）二维图标可扩展立体拉伸效果；3）数据转坐标，地图渲染显示。1）图标内部相对比例变形较小；1）SVG文件解析及提取。2）数据存到临时文件。3）中文汉字变形小；
Vue三种3D动态词云实现
LS_952754的博客
08-31 7615
Vue三种3D动态词云实现
VUE 实现 3D词云 旋转词云效果
qq_65846956的博客
08-10 1825
VUE 实现 3D词云 旋转词云 动态词云 词云
3D词云球体旋转
m0_73216899的博客
02-04 779
无
2020-10-11
qq_50159511的博客
10-11 99
201919102012李彦
炫酷3D球形标签云
kongzhonghu的专栏
07-25 754
模拟将标签数据做成一个富勒烯球状的3D模型，然后鼠标放上去可以自己旋转起来，如果觉得还太单调可以自己设置好看的背景来填充，炫酷3D球形标签云。
用JS实现3D球状标签云示例代码
10-26
3D球状标签云的效果想必很多朋友在浏览网页时都有见到过吧，看起来提复杂的，其实实现起来挺容易的，感兴趣的朋友可以了解下本
一个很有趣3D球状标签云兼容IE8
09-04
一个很有趣的标签云兼容 IE 8亲测可用，不是基于jQuery的，所以不需要引入，下面是具体的代码实现
3D球形标签云效果
03-18
DBSphereTagCloud实现3D球形标签云效果。可以自动惯性滚动
3D球形标签云.rar
08-02
通过transform属性，可以对每个标签应用旋转、缩放和平移等效果，使其能够在3D空间中移动。此外，CSS还用于设置标签的外观，如颜色、字体、大小、阴影等，以营造出立体感和深度。 JavaScript是实现3D球形标签云动态...
Js关键字球状旋转标签云效果
05-15
JavaScript特效，关键字球状旋转效果，球状标签云特效，鼠标放上会旋转，在很多网站的TAB标签中使用了本效果。适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 运行环境：...
vue中实现3d词云效果（已封装组件）
博客简介
03-10 1021
【代码】vue中实现3d词云效果（已封装组件）
前端3D词云
github_39506988的博客
09-19 1077
前端3D词云。
可视化 | 3D文字球状标签云
知识库搭建ing
11-11 530
3D文字球状标签云。
html、css和JavaScript实现3D动态球体
weixin_42532983的博客
04-12 810
利用css3动画属性以及es6的模板字符串创建3D动态球体
js 3d标签云
05-24
您可以使用Three.js和TagCloud.js来创建一个JavaScript 3D标签云。 1. 首先，您需要引入Three.js和TagCloud.js库： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three-tag-cloud@1.0.2/dist/three-tag-cloud.min.js"></script> ``` 2. 创建一个canvas元素： ```html <canvas id="canvas"></canvas> ``` 3. 使用JavaScript创建标签云： ```javascript // 获取canvas元素和窗口大小 const canvas = document.getElementById('canvas'); const width = window.innerWidth; const height = window.innerHeight; // 创建场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setSize(width, height); // 创建标签云 const tagCloud = new THREE.TagCloud(); tagCloud.update(['JavaScript', 'HTML', 'CSS', 'Three.js', 'TagCloud.js'], { font: 'Arial', size: 40, color: '#ffffff', backgroundColor: '#333333', }); // 将标签云添加到场景中 scene.add(tagCloud); // 设置相机位置 camera.position.z = 500; // 渲染循环 function animate() { requestAnimationFrame(animate); tagCloud.rotateY(0.002); renderer.render(scene, camera); } animate(); ``` 此代码将创建一个具有JavaScript、HTML、CSS、Three.js和TagCloud.js标签的标签云，并将其添加到场景中。然后，它将设置相机位置并启动渲染循环，以便在屏幕上呈现标签云。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值