基于CSS3实现三维视图展示功能

最新推荐文章于 2023-04-03 10:17:21 发布
最新推荐文章于 2023-04-03 10:17:21 发布
阅读量1.1k 收藏
点赞数
分类专栏： java web 文章标签： css3 三维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21050783/article/details/53389820
版权

注：基于CSS3和Jquery实现三维视图展示，根据自己需求可进行相应修改，由于IE对CSS3支持有限，所以此三维视图不支持IE浏览器。仅供参考，如有雷同，纯属巧合。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

    <html>  
    <head>  
        <title>三维展示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .body_all{
              width:100%;
            
            }
            .body_right{
             width:18%;
             float:left;
            }
            
            .body_left{
              width:80%;
              float:left;
            }
            
            .stage{
               perspective: 800px;
               /*初始视角*/
               perspective-origin:50% 50%;
            }   
            .container-box{
                width: 300px;
                height:300px;
                margin: 100px auto;
                position: relative;   
                transform-style: preserve-3d;
                transition:5s;
                
                /*旋转基准点*/
                transform-origin:center center 150px;
                /*Mozilla内核浏览器：firefox3.5+*/
                -moz-transform-origin: center center 150px;
               /*Webkit内核浏览器：Safari and Chrome*/
                -webkit-transform-origin: center center 150px;
                /*Opera*/
                -o-transform-origin: center center 150px ;
                /*IE9*/
                -ms-transform-origin: center center 150px;
               /*W3C标准*/
               transform-origin: center center 150px ;
               
            }   
            
            .container-box .side-bottom{
               position: absolute;
               width: 300px;
               height: 240px;
               border:1px solid #000000;
               text-align: center;
               line-height: 240px;
            }
            
            .container-box .side-right{
               position: absolute;
               width: 240px;
               height: 420px;
               border:1px solid #000000;
               text-align: center;
               line-height: 420px;
            }
            
            .container-box .side-back{
               position: absolute;
               width: 300px;
               height: 420px;
               border:1px solid #000000;
               text-align: center;
               line-height: 420px;
            }
            
            .container-box .side-layer{
               position: absolute;
               width: 300px;
               height: 420px;
               line-height: 420px;
               border:1px solid #000000;
               text-align: center;
            }
            
            .right{left:302px;
               /*围绕Y轴  */
               -moz-transform:rotateY(-90deg) ;
               -webkit-transform:rotateY(-90deg);
               -o-transform: rotateY(-90deg);
               -ms-transform:rotateY(-90deg);
               transform: rotateY(-90deg);
               /*旋转基点--X */
               -moz-transform-origin: left;
               -webkit-transform-origin: left;
               -o-transform-origin: left;
               -ms-transform-origin: left;
               transform-origin: left ;
            }   
            
             .bottom{top:422px;
               /*围绕X轴*/
               -moz-transform:rotateX(90deg) ;
               -webkit-transform:rotateX(90deg);
               -o-transform: rotateX(90deg);
               -ms-transform:rotateX(90deg);
               transform: rotateX(90deg);
               /*旋转基点--Y*/   
               -moz-transform-origin: top;
               -webkit-transform-origin: top;
               -o-transform-origin: top;
               -ms-transform-origin: top;
               transform-origin: top ;
             }   

           
            .back{z-index:1;}   
            
            .layer{
                /*top:120px;*/
                /*围绕X轴*/
               -moz-transform:rotateX(90deg) ;
               -webkit-transform:rotateX(90deg);
               -o-transform: rotateX(90deg);
               -ms-transform:rotateX(90deg);
               transform: rotateX(90deg);
               /*旋转基点--Y*/           
               -moz-transform-origin: top;
               -webkit-transform-origin: top;
               -o-transform-origin: top;
               -ms-transform-origin: top;
               transform-origin: top ;
            }
            
           
            .container:hover{
                -moz-transform:rotateX(-30deg);
                -webkit-transform:rotateX(-30deg);
                -o-transform: rotateX(-30deg);
                -ms-transform:rotateX(-30deg);
                transform: rotateX(-30deg);    
            }
            
            .blank{
              width:39px;
              height:39px;
              line-height:40px;
              float:left;
              border-right:1px solid #000000;
              border-bottom:1px solid #000000;
              background-color:#E5E5E5;
            }
            
             .blank_fill{
              width:39px;
              height:39px;
              line-height:40px;
              float:left;
              border-right:1px solid #000000;
              border-bottom:1px solid #000000;
            }
            
            .content{
              width:100%;
              float:left;
              border:1px solid black;
              border-radius:5px;
              margin-bottom:20px;
            }
            
            .color_line{
              width:100%;
              height:20px;
              margin-top:10px;
            }
            
            .line_text_left{
              width:40px;
              height:40px;
              line-height:40px;
              text-align:left;
              float:left;
            }
            .line_text_right{
              width:40px;
              height:40px;
              line-height:40px;
              float:left;
            }
            
            .operation_line{
              width:100%;
              height:55px;
              text-align:center;
            }
            
            
            
            
            .icon{
               background: url(play1.png) no-repeat; /*url为png图片的路径*/
               /*width和line-height分别对应每个小图标的宽和高*/
               width: 55px;
               height:53px;
               display: inline-block;
            }
            .icon-left{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -3px -67px;/*对应小图标的坐标*/
            }
            .icon-right{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -148px -67px;/*对应小图标的坐标*/
            }
            .icon-top{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -73px -3px;/*对应小图标的坐标*/
            }
            .icon-bottom{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -73px -140px;/*对应小图标的坐标*/
            }
            .icon-ok{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -73px -70px;/*对应小图标的坐标*/
            }
            .icon-no{   /*png图片左上角为原点,往右往下均为负值*/
               background-position: -147px -3px;/*对应小图标的坐标*/
            }
            .button{
               border:none;
            
            }
        </style>
        <script src="jquery.js"></script>
    </head>  
    <body>  
      <div class="body_all">
         <div class="body_left">
           <div class="stage">  
            <div class="container-box" id="container">
                <!-- back begin-->
                <div class="side-back back" id="back_line">
                </div>
                <!-- back begin-->
                
                <!-- right begin-->
                <div class="side-right right" id="right_line">
                </div>
                <!-- right end-->

                <!-- bottom begin-->
                <div class="side-bottom bottom" id="bottom_line">
                </div>
                <!-- bottom end-->
            </div>         
          </div>
         </div>
         <div class="body_right">
            <div class="content" id="content">
            </div>
            <div class="content" id="console">

            </div>
            <div class="content" id="operation">
               <div class="color_line" style="text-align:center; border-bottom:1px solid black;">显示旋转</div>
               <div class="operation_line">
                 
                 <input type="button" class="button icon icon-top" οnclick="rotate('x',30)" >
                
                 
               </div>
               <div class="operation_line">
               <input type="button" class="button icon icon-left" οnclick="rotate('z',-30)" >
               <input type="button" id="contr" class="button icon icon-no" οnclick="run(this)" >
               <input type="button" class="button icon icon-right" οnclick="rotate('z',30)" >  
               </div>
               <div class="operation_line">
                <input type="button" class="button icon icon-bottom" οnclick="rotate('x',-30)" >
               </div>
            </div>
            
         </div>
      </div>
       


    <script type="text/javascript" charset='utf-8'>
    
        var degXs=0;
        var degYs=0;
        var timeout = false; //启动及关闭按钮
        
        function rotate(type,degs){
            timeout = true;
            $("#contr").attr('class','button icon icon-no');
            
            if(type=='z'){
            degYs=(degs+degYs)%360;
            }
            
            if(type=='x'){
            degXs=(degs+degXs)%360;
            }
            document.getElementById('container').style.transform='rotateX('+degXs+'deg) rotateY('+degYs+'deg)';
        }
        
        
        //var degs = 0;
        
        function run(data){
            if($(data).attr('class') =='button icon icon-no'){
              $(data).attr('class','button icon icon-ok');
              timeout = false;
            }else{
              $(data).attr('class','button icon icon-no');
              timeout = true;
            };
          aaa();
        }
        var flg = false;
        function aaa(){
          if(timeout) return;  
           runy();  
           setTimeout(aaa,1000); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒  
           
           //setInterval (runy(), 1000);
           function runy(){
             //degYs+=15;
            
             if(!flg){
                degYs+=15;
                if(degYs>90){
                  flg=true;
                }
             }else{
               degYs-=15;
               if(degYs<-90){
                 flg = false;
               }
             }
             document.getElementById('container').style.transform='rotateY('+degYs+'deg) rotateX('+degXs+'deg)';
           }
        }
    
    
          var rows,cols,lay;  //行，列，层
          var blank_size=40;  //小方格大小
          
          var back_bg=$('#back_line');
          var right_bg=$('#right_line');
          var bottom_bg= $('#bottom_line');
          var container =$('#container');
          var consoleCon = $('#console');
          var colorarr=['#00FF00','#EEEE00','#FF7F50','#FF3030'];
          var namearr=['0℃~10℃&nbsp;','10℃~20℃&nbsp;','20℃~30℃&nbsp;','30℃~50℃&nbsp;'];
          
          var data="11.0 11.1 11.2 11.3 11.4 11.5 11.6 12.0 12.1 12.2 12.3 12.4 12.5 12.6 13.0 13.1 13.2 13.3 13.4 13.5 13.6 14.0 14.1 14.2 14.3 14.4 14.5 14.6 15.0 15.1 15.2 15.3 15.4 15.5 15.6 21.0 21.1 21.2 21.3 21.4 21.5 21.6 22.0 22.1 22.2 22.3 22.4 22.5 22.6 23.0 23.1 23.2 23.3 23.4 23.5 23.6 24.0 24.1 24.2 24.3 24.4 24.5 24.6 25.0 25.1 25.2 25.3 25.4 25.5 25.6 31.0 31.1 31.2 31.3 31.4 31.5 31.6 32.0 32.1 32.2 32.3 32.4 32.5 32.6 33.0 33.1 33.2 33.3 33.4 33.5 33.6 34.0 34.1 34.2 34.3 34.4 34.5 34.6 35.0 35.1 35.2 35.3 35.4 35.5 35.6 41.0 41.1 41.2 41.3 41.4 41.5 41.6 42.0 42.1 42.2 42.3 42.4 42.5 42.6 43.0 43.1 43.2 43.3 43.4 43.5 43.6 44.0 44.1 44.2 44.3 44.4 44.5 44.6 45.0 45.1 45.2 45.3 45.4 45.5 45.6";
          var arr = data.split(" ");
          
          
          
          function drowpanel(colorarr,namearr){
            var results="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>温度参照示图</div>";
            for(var i=0;i<colorarr.length;i++){
              results+="<div class='color_line'>";
              results+="<div style='width:50%; height:20px;display:inline; float:left; text-align:right;'>"+namearr[i]+"</div>";
              results+="<div style='width:30%; height:20px;background-color:"+colorarr[i]+";display:inline;float:left;'></div></div>";
            }
            results+="<div class='color_line'></div>";
            $("#content").append(results);
          }
         
          initcontainer(5,7,4);
          drowpanel(colorarr,namearr);
          //初始化侧面，线条，坐标
          function initcontainer(rows,cols,lay){
            lay++;
            var widths= cols*blank_size;
            var heights = rows*blank_size;
            var zHeights = lay*blank_size;
            back_bg.css("height",zHeights).css("width",widths).css("line-height",zHeights);            
            right_bg.css("height",zHeights).css("width",heights).css("left",widths+2).css("line-height",zHeights);
            bottom_bg.css("height",heights).css("width",widths).css("top",zHeights+2).css("line-height",heights);    
            drow_bg_blank(bottom_bg,rows*cols,widths,heights);
            drow_bg_blank(right_bg,rows*lay,heights,zHeights);
            drow_bg_blank(back_bg,lay*cols,widths,zHeights);
            
            
            drow_bottom_x(bottom_bg,cols,widths,heights);
            drow_top_x(back_bg,cols,widths,heights);
            
            drow_bottom_y(bottom_bg,rows,widths,heights);
            drow_top_y(right_bg,rows,widths,heights);
            
            drow_right_z(right_bg,lay,zHeights,heights);
            drow_left_z(back_bg,lay,zHeights,heights);
            
            
            drow_data(lay,widths,heights,rows,cols);
          }
          
          //侧面线条，bg_con：容器，countblank：方格改书，divwidth：宽，divheight：高
          function drow_bg_blank(bg_con,countblank,divwidth,divheight){
            var results ="<div stype='width:"+divwidth+";height:"+divheight+";'>";
            for(var i=0;i<countblank;i++){        
            results+="<div class='blank'></div>";
            }
             results+="</div>";
             bg_con.append(results);
          }
          //bg_con:容器，wid：宽度，hei：高度
          //底部X轴
          function drow_bottom_x(bg_con,cols,wid,hei){
             var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:"+hei+"px;left:-"+blank_size/6+"px;'>";
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_left'>";
                results+=i;
                results+="</div>"
             }
             results+="<div class='line_text_left'>X</div>"
             results+="</div>";
            bg_con.append(results);
          }
          //bg_con:容器，wid：宽度，hei：高度
          //顶部X轴
         function drow_top_x(bg_con,cols,wid,hei){
             var results ="<div style='width:"+wid+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:-"+blank_size/6+"px;'>";
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_left'>";
                results+=i;
                results+="</div>"
             }
             results+="<div class='line_text_left'>X</div>"
             results+="</div>";
            bg_con.append(results);
          }
        
          //bg_con:容器，wid：宽度，hei：高度
          //底部Y轴
          function drow_bottom_y(bg_con,cols,wid,hei){
             var results ="<div style='width:"+blank_size+"px;height:"+hei+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
              results+="<div class='line_text_right'>Y</div>"
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_right'>";
                results+=cols-2-i;
                results+="</div>"
             }
            
             results+="</div>";
            bg_con.append(results);
          }
          
          //bg_con:容器，wid：宽度，hei：高度
          //顶部Y轴
          function drow_top_y(bg_con,cols,wid,hei){
             var results ="<div style='width:"+hei+"px;height:"+blank_size+"px;position:absolute;top:-"+blank_size+"px;left:"+blank_size/3+"px;'>";
              results+="<div class='line_text_right'>Y</div>"
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_right'>";
                results+=cols-2-i;
                results+="</div>"
             }
            
             results+="</div>";
            bg_con.append(results);
          }
          
          //bg_con:容器，wid：宽度，hei：高度
          //右侧Z轴
          function drow_right_z(bg_con,cols,wid,hei){
             var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:"+hei+"px;top:"+blank_size/3+"px;'>";
              results+="<div class='line_text_right'>Z</div>"
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_right'>";
                results+=cols-2-i;
                results+="</div>"
             }
            
             results+="</div>";
            bg_con.append(results);
          }
          
          //bg_con:容器，wid：宽度，hei：高度
          //右侧Z轴
          function drow_left_z(bg_con,cols,wid,hei){
             var results ="<div style='width:"+blank_size+"px;height:"+wid+"px;position:absolute;left:-"+blank_size+"px;top:"+blank_size/3+"px;'>";
              results+="<div class='line_text_right'>Z</div>"
             for(var i=0;i<cols-1;i++){
                results+="<div class='line_text_right'>";
                results+=cols-2-i;
                results+="</div>"
             }
             results+="</div>";
            bg_con.append(results);
          }
          
          
          function drow_data(lay,wid,hei,rows,cols){
            var resu ="<div class='color_line' style='text-align:center;border-bottom:1px solid black;'>层显控制</div>";
           for(var i=0;i<lay-1;i++){
             drow_data_lay(i+1,lay-i-1,wid,hei,rows,cols);
             resu+="<input type='radio' name='radioname' οnclick='showdata("+(i+1)+")'>"
             resu+="第 "+(i+1)+" 层<br>";
           }
            
            //输出按钮
             consoleCon.append(resu);
          }
          //画层
          function drow_data_lay(lay_h,lay,wid,hei,rows,cols){
            var results="<div class='side-layer layer' id='layer_"+lay_h+"' style='height:"+hei+"px;width:"+wid+"px;line-height:"+hei+"px;top:"+lay*blank_size+"px;'>";
            //results+=lay_h;
             results+="<div style='height:"+hei+";,width:"+wid+";'>";
            for(var i=0;i<rows*cols;i++){
              var num = arr[((lay-1)*rows*cols+i)];
              var colors;
              if(num<=10){
              colors=colorarr[0];
              }else if(num>10 && num<=20){
               colors=colorarr[1];
              }else if(num>20 && num<=30){
               colors=colorarr[2];
              }else{
               colors=colorarr[3];
              }
              results+="<div class='blank_fill' style='background-color:"+colors+"'>"+num+"</div>";
            }
            
            results+="</div>";
            container.append(results)
          }
          
          function drow_data_content(results,datacount,wid,hei){
           
          
          }
   
          
          //控制层显示
          function showdata(layid){
            $('.layer').hide();
            $('#layer_'+layid).show();
          }
          
          
        </script>
                
    </body>  
    </html>  

天道酬勤91
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可显示三维视图的CSS3图片幻灯效果.rar
07-10
可显示三维视图的CSS3图片幻灯效果，本效果主要是响应鼠标的动作，可改变图片显示的角度，有种三维空间感，每张播放的图片，均可显示图片描述、当前进度标示等，下边的小方格，会标注出当前播放的图片位置。...
CSS空间转换-制作立体呈现
a1071626267的博客
06-04 124
CSS空间转换-制作立体呈现
css 实现三维立体旋转效果
weixin_38881784的博客
04-28 4800
css实现三维立体旋转效果
css-3d旋转（三维立体效果）
qq_39111074的博客
01-24 2146
将平面形状 进行 3d 旋转，营造 三维立体空间视觉效果 例如：四边形 进行 3d 旋转- - - 四边形宽高- - - width:200px; height:100px; 原图： 进行3d旋转- - - transform:rotateX(-60deg) rotateY(0deg) rotateZ(-22deg); 后： 其他 三维效果 可以调节 X, Y, Z 轴旋转角度，查看具体效果得到想要的形状 ps:一般写了transform ，还会再写个 -webkit-transform（和trans
分享8个前端可以制作360度WebVr全景视图框架
左本Web3D
10-19 5527
介绍8个可以实现360度WebVr全景视图Javascript 库。
CSS 3D效果
weixin_68485297的博客
04-11 7439
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
css 实现3D效果
蓝朽的小世界
04-03 5782
css实现3d效果
firefox13 三维视图
11-12
firefox13 能用来看三维视图的版本 好不容易才找到的，最完善的一个版本。可以用来很好的查看网站的DIV+CSS样式。
HTML5 transform三维立方体实现360无死角三维旋转效果
09-28
总之，HTML5的`transform`属性为Web开发人员提供了创造丰富交互体验的可能性，但实现三维立方体旋转并处理视图顺序需要对CSS3和JavaScript有深入的理解。通过不断学习和实践，我们可以克服这些挑战，构建出更加生动...
CSS3 3D位移translate效果实例介绍
09-27
在CSS3中，3D 位移（3D Translation）是一种强大的功能，它允许元素在三维空间内移动，为网页设计带来丰富的动态效果。本文将详细介绍CSS3的3D位移`translate`属性，并通过一个具体的实例来演示其用法。 `translate...
css3打造的超酷三维动画效果的导航菜单特效代码
03-20
html 3d效果
02-04
用html开发的3d效果，文字（图片）随着鼠标的移动360度旋转，随鼠标移动速度变化。
js加CSS3立体式等距网格和三维网格效果
06-12
效果描述： 国外网站弄过来的一个非常不错的动画效果，适合欣赏使用 使用方式这里就不再赘述了
css3的图形3d翻转效果应用示例
09-25
CSS3的3D翻转效果是现代网页设计中一种引人注目的动态视觉技术，它允许元素在三维空间内进行旋转，为用户带来更丰富的交互体验。本示例主要讲解了如何利用CSS3实现图形的3D翻转效果，通过以下几个关键知识点来实现这...
SwiftUI macOS 精品项目大全之 markdown编辑器支持CSS实时预览与语法高亮coredata
iCloudEnd的博客
02-26 748
实战需求 markdown编辑器支持CSS实时预览与语法高亮 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 功能 使用GitHub的CSS样式化的实时预览，以便您可以实时查看文档的外观。 语法高亮显示，使样式脱颖而出。 可自定义的工具栏，可快速访问常用语法，使编辑变得平易近人。 键盘快捷键用于常用语法，使编辑更快。 用于添加自定义元素的内联HTML标签。 模板可让您快速入门，自定义模板创建和管理，使编写常见文档变得容易。 插入预先填充占位符的表，以更快地编写表。 插
CSS基础 | (3)CSS样式实时查看与编辑
sdu_hao的博客
10-19 557
目录 一、CSS样式浏览器实时查看与编辑(Chrome为例) 二、神器WorkSpace:在线实时更新本地CSS文件 一、CSS样式浏览器实时查看与编辑(Chrome为例) 首先我们写一个简单的页面 css代码： h2 { color: red; } html代码： <!DOCTYPE html> <html lang="en"> <he...
CSS响应式设计——（视口/网格视图/媒体查询/图像/视频）看这一篇就够了
Vec_Kun的博客
02-02 1112
响应式 web 设计会让我们的网页在所有设备上运行良好。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 JavaScript。视口（viewport）是用户在网页上的可见区域。视口随设备而异，在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。
使用CSS3实现酷炫的3D旋转视图
趣谈前端
06-09 448
点击上方 蓝字 关注趣谈前端3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击...
html如何3d显示图片,三维图像显示（CSS）
weixin_29807369的博客
06-04 1355
css/*custom font - Montserrat*/@import url(http://fonts.googleapis.com/css?family=Montserrat);/*basic reset*/* {margin: 0; padding: 0;}/*forcing the body to take 100% height*/html, body {min-height: 1...
基于ThreeJS的三维动画设计与实现概述
最新发布
06-09
基于ThreeJS的三维动画设计与实现可以分为以下几个步骤： 1. 创建场景和摄像机：使用ThreeJS创建一个场景和摄像机，确定场景中的元素和摄像机的位置、视角等参数。 2. 导入模型和材质：使用ThreeJS导入3D模型和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值