温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×
登录注册×
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
登 录 注册有礼
云服务器 香港服务器 高防服务器
最新更新 网站标签 地图导航
产品

如何利用html5和css3动画排列人物头像

发布时间：2021-07-30 15:33:19 来源：亿速云 阅读：204 作者：chen 栏目：web开发

本篇内容介绍了“如何利用html5和css3动画排列人物头像”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　今天给大家分享一款html5和css3动画排列人物头像演示。这款实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。效果图如下：

如何利用html5和css3动画排列人物头像

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

  1. <div class='stage'>  

  2.         <div class='image'>  

  3.             <img src="https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  

  4.             <div class='smiley'>  

  5.                 <svg width="30px" height="30px">  

  6.                     <path fill="#effedd" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15s15-6.7,15-15C30,6.7,23.3,0,15,0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9,18,10.5C18,9.1,19.1,8,20.5,8z M10.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5C8,9.1,9.1,8,10.5,8z M15,26c-5,0-9-4-9-9h4c0,3.3,2.7,6,6,6s6-2.7,6-6h4C24,22,20,26,15,26z" /></svg>  

  7.             </div>  

  8.         </div>  

  9.         <figure class='avatar'>  

  10.         </figure>  

  11.         <figure class='avatar'>  

  12.         </figure>  

  13.         <figure class='avatar'>  

  14.         </figure>  

  15.         <figure class='avatar'>  

  16.         </figure>  

  17.         <figure class='avatar'>  

  18.         </figure>  

  19.         <figure class='avatar'>  

  20.         </figure>  

  21.         <figure class='avatar'>  

  22.         </figure>  

  23.         <figure class='avatar'>  

  24.         </figure>  

  25.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

  1. .stage {   

  2.   position: absolute;   

  3.   top: 0;   

  4.   rightright: 0;   

  5.   bottombottom: 0;   

  6.   left: 0;   

  7.   margin: auto;   

  8.   height: 460px;   

  9.   width: 480px;   

  10. }   

  11.   

  12. .avatar {   

  13.   position: absolute;   

  14.   top: 0;   

  15.   rightright: 0;   

  16.   bottombottom: 0;   

  17.   left: 0;   

  18.   margin: auto;   

  19.   height: 64px;   

  20.   width: 64px;   

  21.   background-repeat: no-repeat;   

  22.   background-size: cover;   

  23.   border-radius: 50%;   

  24.   -webkit-transform-origin: center;   

  25.       -ms-transform-origin: center;   

  26.           transform-origin: center;   

  27. }   

  28. .avatar:before {   

  29.   content: '';   

  30.   position: absolute;   

  31.   top: -8%;   

  32.   rightright: -8%;   

  33.   height: 17.06667px;   

  34.   width: 17.06667px;   

  35.   background: #bec4bc;   

  36.   border-radius: 50%;   

  37.   border: 3px solid white;   

  38. }   

  39. .avatar:nth-of-type(1) {   

  40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  41.           animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  42. }   

  43. @-webkit-keyframes ani1 {   

  44.   0%, 20% {   

  45.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   

  46.             transform: rotate(45deg) translate(0) rotate(-45deg);   

  47.   }   

  48.   34%, 100% {   

  49.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   

  50.             transform: rotate(45deg) translate(208px) rotate(-45deg);   

  51.   }   

  52. }   

  53. @keyframes ani1 {   

  54.   0%, 20% {   

  55.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   

  56.             transform: rotate(45deg) translate(0) rotate(-45deg);   

  57.   }   

  58.   34%, 100% {   

  59.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   

  60.             transform: rotate(45deg) translate(208px) rotate(-45deg);   

  61.   }   

  62. }   

  63. .avatar:nth-of-type(2) {   

  64.   -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  65.           animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  66. }   

  67. @-webkit-keyframes ani2 {   

  68.   0%, 20% {   

  69.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   

  70.             transform: rotate(90deg) translate(0) rotate(-90deg);   

  71.   }   

  72.   34%, 100% {   

  73.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   

  74.             transform: rotate(90deg) translate(208px) rotate(-90deg);   

  75.   }   

  76. }   

  77. @keyframes ani2 {   

  78.   0%, 20% {   

  79.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   

  80.             transform: rotate(90deg) translate(0) rotate(-90deg);   

  81.   }   

  82.   34%, 100% {   

  83.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   

  84.             transform: rotate(90deg) translate(208px) rotate(-90deg);   

  85.   }   

  86. }   

  87. .avatar:nth-of-type(3) {   

  88.   -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  89.           animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  90. }   

  91. @-webkit-keyframes ani3 {   

  92.   0%, 20% {   

  93.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   

  94.             transform: rotate(135deg) translate(0) rotate(-135deg);   

  95.   }   

  96.   34%, 100% {   

  97.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   

  98.             transform: rotate(135deg) translate(208px) rotate(-135deg);   

  99.   }   

  100. }   

  101. @keyframes ani3 {   

  102.   0%, 20% {   

  103.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   

  104.             transform: rotate(135deg) translate(0) rotate(-135deg);   

  105.   }   

  106.   34%, 100% {   

  107.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   

  108.             transform: rotate(135deg) translate(208px) rotate(-135deg);   

  109.   }   

  110. }   

  111. .avatar:nth-of-type(4) {   

  112.   -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  113.           animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  114. }   

  115. @-webkit-keyframes ani4 {   

  116.   0%, 20% {   

  117.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   

  118.             transform: rotate(180deg) translate(0) rotate(-180deg);   

  119.   }   

  120.   34%, 100% {   

  121.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   

  122.             transform: rotate(180deg) translate(208px) rotate(-180deg);   

  123.   }   

  124. }   

  125. @keyframes ani4 {   

  126.   0%, 20% {   

  127.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   

  128.             transform: rotate(180deg) translate(0) rotate(-180deg);   

  129.   }   

  130.   34%, 100% {   

  131.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   

  132.             transform: rotate(180deg) translate(208px) rotate(-180deg);   

  133.   }   

  134. }   

  135. .avatar:nth-of-type(5) {   

  136.   -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  137.           animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  138. }   

  139. @-webkit-keyframes ani5 {   

  140.   0%, 20% {   

  141.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   

  142.             transform: rotate(225deg) translate(0) rotate(-225deg);   

  143.   }   

  144.   34%, 100% {   

  145.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   

  146.             transform: rotate(225deg) translate(208px) rotate(-225deg);   

  147.   }   

  148. }   

  149. @keyframes ani5 {   

  150.   0%, 20% {   

  151.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   

  152.             transform: rotate(225deg) translate(0) rotate(-225deg);   

  153.   }   

  154.   34%, 100% {   

  155.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   

  156.             transform: rotate(225deg) translate(208px) rotate(-225deg);   

  157.   }   

  158. }   

  159. .avatar:nth-of-type(6) {   

  160.   -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  161.           animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  162. }   

  163. @-webkit-keyframes ani6 {   

  164.   0%, 20% {   

  165.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   

  166.             transform: rotate(270deg) translate(0) rotate(-270deg);   

  167.   }   

  168.   34%, 100% {   

  169.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   

  170.             transform: rotate(270deg) translate(208px) rotate(-270deg);   

  171.   }   

  172. }   

  173. @keyframes ani6 {   

  174.   0%, 20% {   

  175.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   

  176.             transform: rotate(270deg) translate(0) rotate(-270deg);   

  177.   }   

  178.   34%, 100% {   

  179.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   

  180.             transform: rotate(270deg) translate(208px) rotate(-270deg);   

  181.   }   

  182. }   

  183. .avatar:nth-of-type(7) {   

  184.   -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  185.           animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  186. }   

  187. @-webkit-keyframes ani7 {   

  188.   0%, 20% {   

  189.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   

  190.             transform: rotate(315deg) translate(0) rotate(-315deg);   

  191.   }   

  192.   34%, 100% {   

  193.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   

  194.             transform: rotate(315deg) translate(208px) rotate(-315deg);   

  195.   }   

  196. }   

  197. @keyframes ani7 {   

  198.   0%, 20% {   

  199.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   

  200.             transform: rotate(315deg) translate(0) rotate(-315deg);   

  201.   }   

  202.   34%, 100% {   

  203.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   

  204.             transform: rotate(315deg) translate(208px) rotate(-315deg);   

  205.   }   

  206. }   

  207. .avatar:nth-of-type(8) {   

  208.   -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  209.           animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  210. }   

  211. @-webkit-keyframes ani8 {   

  212.   0%, 20% {   

  213.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   

  214.             transform: rotate(360deg) translate(0) rotate(-360deg);   

  215.   }   

  216.   34%, 100% {   

  217.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   

  218.             transform: rotate(360deg) translate(208px) rotate(-360deg);   

  219.   }   

  220. }   

  221. @keyframes ani8 {   

  222.   0%, 20% {   

  223.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   

  224.             transform: rotate(360deg) translate(0) rotate(-360deg);   

  225.   }   

  226.   34%, 100% {   

  227.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   

  228.             transform: rotate(360deg) translate(208px) rotate(-360deg);   

  229.   }   

  230. }   

  231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   

  232.   -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  233.           animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  234. }   

  235. .avatar:nth-of-type(7):before {   

  236.   -webkit-animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  237.           animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  238. }   

  239. .avatar:nth-of-type(3):before {   

  240.   -webkit-animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  241.           animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  242. }   

  243. .avatar:nth-of-type(1):before {   

  244.   -webkit-animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  245.           animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  246. }   

  247. .avatar:nth-of-type(6):before {   

  248.   -webkit-animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  249.           animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  250. }   

  251. .avatar:nth-of-type(5):before {   

  252.   -webkit-animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  253.           animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  254. }   

  255. .avatar:nth-of-type(8):before {   

  256.   -webkit-animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  257.           animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  258. }   

  259.   

  260. .image {   

  261.   position: absolute;   

  262.   top: 0;   

  263.   rightright: 0;   

  264.   bottombottom: 0;   

  265.   left: 0;   

  266.   margin: auto;   

  267.   height: 220px;   

  268.   width: 220px;   

  269. }   

  270. .image img {   

  271.   position: relative;   

  272.   height: 220px;   

  273.   width: 220px;   

  274.   border-radius: 50%;   

  275.   z-index: 1;   

  276. }   

  277. .image:before {   

  278.   position: absolute;   

  279.   top: 0;   

  280.   rightright: 0;   

  281.   bottombottom: 0;   

  282.   left: 0;   

  283.   margin: auto;   

  284.   content: '';   

  285.   height: 100%;   

  286.   width: 100%;   

  287.   background: #f9fff7;   

  288.   border: 3px solid #e7f5d1;   

  289.   border-radius: 50%;   

  290.   -webkit-animation: pulse 1s 1.4s ease-out;   

  291.           animation: pulse 1s 1.4s ease-out;   

  292.   -webkit-animation-iteration-count: 3;   

  293.           animation-iteration-count: 3;   

  294. }   

  295. .image .smiley {   

  296.   position: absolute;   

  297.   top: -8px;   

  298.   rightright: -8px;   

  299.   height: 64px;   

  300.   width: 64px;   

  301.   background: #b5e763;   

  302.   border-radius: 50%;   

  303.   border: 5px solid white;   

  304.   -webkit-animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  305.           animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  306.   -webkit-transform-origin: center;   

  307.       -ms-transform-origin: center;   

  308.           transform-origin: center;   

  309.   z-index: 1;   

  310. }   

  311. .image .smiley svg {   

  312.   position: absolute;   

  313.   top: 0;   

  314.   rightright: 0;   

  315.   bottombottom: 0;   

  316.   left: 0;   

  317.   margin: auto;   

  318.   -webkit-animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  319.           animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   

  320. }   

  321.   

  322. @-webkit-keyframes bounce {   

  323.   0% {   

  324.     -webkit-transform: scale(0);   

  325.             transform: scale(0);   

  326.   }   

  327.   5% {   

  328.     -webkit-transform: scale(1.5);   

  329.             transform: scale(1.5);   

  330.   }   

  331.   10%, 100% {   

  332.     -webkit-transform: scale(1);   

  333.             transform: scale(1);   

  334.   }   

  335. }   

  336.   

  337. @keyframes bounce {   

  338.   0% {   

  339.     -webkit-transform: scale(0);   

  340.             transform: scale(0);   

  341.   }   

  342.   5% {   

  343.     -webkit-transform: scale(1.5);   

  344.             transform: scale(1.5);   

  345.   }   

  346.   10%, 100% {   

  347.     -webkit-transform: scale(1);   

  348.             transform: scale(1);   

  349.   }   

  350. }   

  351. @-webkit-keyframes pulse {   

  352.   0% {   

  353.     -webkit-transform: scale(0.1, 0.1);   

  354.             transform: scale(0.1, 0.1);   

  355.     opacity: 0.0;   

  356.   }   

  357.   50% {   

  358.     opacity: 1.0;   

  359.   }   

  360.   100% {   

  361.     -webkit-transform: scale(3);   

  362.             transform: scale(3);   

  363.     opacity: 0.0;   

  364.   }   

  365. }   

  366. @keyframes pulse {   

  367.   0% {   

  368.     -webkit-transform: scale(0.1, 0.1);   

  369.             transform: scale(0.1, 0.1);   

  370.     opacity: 0.0;   

  371.   }   

  372.   50% {   

  373.     opacity: 1.0;   

  374.   }   

  375.   100% {   

  376.     -webkit-transform: scale(3);   

  377.             transform: scale(3);   

  378.     opacity: 0.0;   

  379.   }   

  380. }   

  381. @-webkit-keyframes colorchange {   

  382.   0% {   

  383.     background: #bec4bc;   

  384.   }   

  385.   100% {   

  386.     background: #b5e763;   

  387.   }   

  388. }   

  389. @keyframes colorchange {   

  390.   0% {   

  391.     background: #bec4bc;   

  392.   }   

  393.   100% {   

  394.     background: #b5e763;   

  395.   }   

  396. }   

  397. .avatar:nth-of-type(1) {   

  398.   background-image: url("128.jpg");   

  399. }   

  400.   

  401. .avatar:nth-of-type(2) {   

  402.   background-image: url("rasagy.jpg");   

  403. }   

  404.   

  405. .avatar:nth-of-type(3) {   

  406.   background-image: url("geeftvorm.jpg");   

  407. }   

  408.   

  409. .avatar:nth-of-type(4) {   

  410.   background-image: url("VinThomas.jpg");   

  411. }   

  412.   

  413. .avatar:nth-of-type(5) {   

  414.   background-image: url("ladylexy.jpg");   

  415. }   

  416.   

  417. .avatar:nth-of-type(6) {   

  418.   background-image: url("claudioguglieri.jpg");   

  419. }   

  420.   

  421. .avatar:nth-of-type(7) {   

  422.   background-image: url("jina.jpg");   

  423. }   

  424.   

  425. .avatar:nth-of-type(8) {   

  426.   background-image: url("peterme.jpg");   

  427. }  

“如何利用html5和css3动画排列人物头像”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

向AI问一下细节
推荐阅读：
  1. 利用OnAnimatorove函数控制人物的移动
  2. 利用Java如何实现全排列算法和递归

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

html5 css3

猜你喜欢

最新资讯
相关推荐

相关标签

html5+css3 html5游戏 html5 video html5标准 html5+css html5 canvas html5plus html5图片压缩上传 html5压缩上传 html5的学习笔记 html5基础 html5开发 html5跨平台 html5 css3 cocos2d-html5 html5标签 html5新特性 html5特性 css3动画 ​css3
AI
助
手
产品服务
地区划分
专题活动
帮助支持
关于我们
售后咨询
7*24小时在线电话：400-100-2938
7*24小时在线 QQ：800811969
关注亿速云

亿速云公众号

手机网站二维码

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有

广州亿速云计算有限公司粤ICP备17096448号-1 粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529