【博主推荐】html好看的个人主页(附源码)

news2024/11/20 0:42:58

个人主页介绍

  • 【博主推荐】html好看的个人主页
    • 1.背景个人主页效果
    • 2.背景个人主页代码
    • 3.简洁个人主页效果
    • 4.简洁个人主页代码
    • 5.卡片个人主页效果
    • 6.卡片个人主页代码
    • 7.星空个人主页效果
    • 8.星空个人主页代码
    • 源码下载

【博主推荐】html好看的个人主页

附带四种风格个人主页
背景个人主页:带有背景图片的个人主页,可以配置不同的背景色,让个人主页更加主题;
简洁个人主页:风格简洁,但不是色彩,极简风;
卡片个人主页:以卡片形式展现个人主页内容,有层次感,且有空间感;
星空个人主页:遥望星空的动态效果,配个主页内容,无限好看;
HTML + JS + CSS

1.背景个人主页效果

  • 静态效果
    请添加图片描述
  • 动态效果

    html个人主页1

2.背景个人主页代码

以下是html里面的body内容
设置背景图片透明度
设置个人名言
设置个人主页的菜单
设置个人主页的分享,联系

<body>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-bars btn-mobile-menu__icon"></i>
        <i class="fa fa-chevron-circle-up btn-mobile-close__icon hidden"></i>
    </span>
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">	    
        <a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh博客"><img src="img/girl.png" width="150" alt="xcLeigh博客" class="panel-cover__logo logo"></a>
        <h1 class="panel-cover__title panel-title"><a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh">xcLeigh博客</a></h1>
        <span class="panel-cover__subtitle panel-subtitle">
        <hr class="panel-cover__divider">
        <p class="panel-cover__description">xcLeigh</br>努力到无能为力,拼搏到感动自己!</p>
        <hr class="panel-cover__divider"> 
        <p class="panel-cover__description">欢迎来到我的主页!</p>
        <div class="navigation-wrapper">
          <div>
            <nav class="cover-navigation cover-navigation--primary">
              <ul class="navigation">
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418" title="xcLeigh博客">xcLeigh博客</a></li>
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh文章">xcLeigh文章</a></li>
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418?type=download" title="xcLeigh资源">xcLeigh资源</a></li>
                <li class="navigation__item"><a href="https://www.xcsharp.top/" title="xcLeigh官网">xcLeigh官网</a></li>
              </ul>
            </nav>
          </div>
          
<div>
<nav class="cover-navigation navigation--social">
  <ul class="navigation">
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=blog" title="我的博客" target="_blank">
      <i class="social fa fa-weibo"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="http://wpa.qq.com/msgrd?v=3&uin=1376174032&site=qq&menu=yes" title="QQ" target="_blank">
      <i class="social fa fa-qq"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a data-v="" href="#" title="扫一扫加我微信" class="wechat">
	<div data-v="" class="qrCode">
	 <img data-v="" src="img/csdn.png" width="92" onclick="window.open('https://blog.csdn.net/weixin_43151418?type=blog')">
	  <div data-v="" class="triangle-down"></div>
	</div>
      <i class="social fa fa-weixin"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=download" title="资源源码" target="_blank">
      <i class="social fa fa-telegram"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=blog" rel="author" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="mailto:1376174032@qq.com" title="发邮件给我">
      <i class="social fa fa-envelope"></i>
    </a>
  </li>
  </ul>
</nav>
</div>
        </div>
      </div>
    </div>
    <div class="panel-cover--overlay cover-slate"></div>
  </div>
</header>
</body>

3.简洁个人主页效果

  • 静态效果
    请添加图片描述- 动态效果

    html个人简介2

4.简洁个人主页代码

以下是html里面的body内容
设置背景图片透明度
设置个人名言
设置个人主页的菜单
设置个人主页的分享,联系

<body>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-bars btn-mobile-menu__icon"></i>
        <i class="fa fa-chevron-circle-up btn-mobile-close__icon hidden"></i>
    </span>
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">	    
        <a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh博客"><img src="img/girl.png" width="150" alt="xcLeigh博客" class="panel-cover__logo logo"></a>
        <h1 class="panel-cover__title panel-title"><a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh">xcLeigh博客</a></h1>
        <span class="panel-cover__subtitle panel-subtitle">
        <hr class="panel-cover__divider">
        <p class="panel-cover__description">xcLeigh</br>努力到无能为力,拼搏到感动自己!</p>
        <hr class="panel-cover__divider"> 
        <p class="panel-cover__description">欢迎来到我的主页!</p>
        <div class="navigation-wrapper">
          <div>
            <nav class="cover-navigation cover-navigation--primary">
              <ul class="navigation">
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418" title="xcLeigh博客">xcLeigh博客</a></li>
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh文章">xcLeigh文章</a></li>
                <li class="navigation__item"><a href="https://blog.csdn.net/weixin_43151418?type=download" title="xcLeigh资源">xcLeigh资源</a></li>
                <li class="navigation__item"><a href="https://www.xcsharp.top/" title="xcLeigh官网">xcLeigh官网</a></li>
              </ul>
            </nav>
          </div>
<div>
<nav class="cover-navigation navigation--social">
  <ul class="navigation">
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=blog" title="我的博客" target="_blank">
      <i class="social fa fa-weibo"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="http://wpa.qq.com/msgrd?v=3&uin=1376174032&site=qq&menu=yes" title="QQ" target="_blank">
      <i class="social fa fa-qq"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a data-v="" href="#" title="扫一扫加我微信" class="wechat">
	<div data-v="" class="qrCode">
	 <img data-v="" src="img/csdn.png" width="92" onclick="window.open('https://blog.csdn.net/weixin_43151418?type=blog')">
	  <div data-v="" class="triangle-down"></div>
	</div>
      <i class="social fa fa-weixin"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=download" title="资源源码" target="_blank">
      <i class="social fa fa-telegram"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="https://blog.csdn.net/weixin_43151418?type=blog" rel="author" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
    </a>
  </li>
  <li class="navigation__item">
    <a href="mailto:1376174032@qq.com" title="发邮件给我">
      <i class="social fa fa-envelope"></i>
    </a>
  </li>
  </ul>
</nav>
</div>
        </div>
      </div>
    </div>
    <div class="panel-cover--overlay cover-slate"></div>
  </div>
</header>
</body>

5.卡片个人主页效果

  • 静态效果
    请添加图片描述
  • 动态效果

    html个人主页3

6.卡片个人主页代码

以下是html里面的body内容
设置背景图片透明度
设置个人名言
设置个人主页的菜单
设置个人主页的分享,联系

<body>
    <div class="page page2">
        <div class="swiper-container swiper-container-lovexhj2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-1.jpg" alt="xcLeigh主页">
                        <p style="font-size:26px;"><b>xcLeigh主页</b></p>
						<hr style="margin:5px 0px;">
                        <p>xcLeigh</p>
                        <p>努力到无能为力,拼搏到感动自己!</p>
						<hr style="margin:5px 0px;">
                        <p style="margin-top:25px;">
							<a href="https://blog.csdn.net/weixin_43151418" title="xcLeigh博客">我的博客</a>
						</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-2.jpg" alt="xcLeigh主页">
                        <p style="font-size:26px;"><b>xcLeigh主页</b></p>
						<hr style="margin:5px 0px;">
                        <p>xcLeigh</p>
                        <p>努力到无能为力,拼搏到感动自己!</p>
						<hr style="margin:5px 0px;">
                        <p style="margin-top:25px;">
							<a href="https://blog.csdn.net/weixin_43151418?type=blog" title="xcLeigh文章">我的文章</a>
						</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-3.jpg" alt="xcLeigh主页">
                        <p style="font-size:26px;"><b>xcLeigh主页</b></p>
						<hr style="margin:5px 0px;">
                        <p>xcLeigh</p>
                        <p>努力到无能为力,拼搏到感动自己!</p>
						<hr style="margin:5px 0px;">
                        <p style="margin-top:25px;">
							<a href="https://blog.csdn.net/weixin_43151418?type=download" title="xcLeigh资源">我的资源</a>
						</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-4.jpg" alt="xcLeigh主页">
                        <p style="font-size:26px;"><b>xcLeigh主页</b></p>
						<hr style="margin:5px 0px;">
                        <p>xcLeigh</p>
                        <p>努力到无能为力,拼搏到感动自己!</p>
						<hr style="margin:5px 0px;">
                        <p style="margin-top:25px;">
							<a href="https://www.xcsharp.top/" title="xcLeigh官网">我的官网</a>
						</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page2-5.jpg" alt="xcLeigh主页">
                        <p style="font-size:26px;"><b>xcLeigh主页</b></p>
						<hr style="margin:5px 0px;">
                        <p>xcLeigh</p>
                        <p>努力到无能为力,拼搏到感动自己!</p>
						<hr style="margin:5px 0px;">
                        <p style="margin-top:25px;">
							<a href="https://blog.csdn.net/weixin_43151418" title="xcLeigh官网">跟我联系</a>
						</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
        </div>
    </div>
    </div>
</body>

7.星空个人主页效果

  • 静态效果
    请添加图片描述
  • 动态效果

    html个人主页4

8.星空个人主页代码

以下是html里面的body内容
设置背景图片透明度
设置个人名言
设置个人主页的菜单
设置个人主页的分享,联系

<body>
  <div class="container" style="position:absolute;width:100%;height:100%;margin:0px;padding:0px; z-index:889;">
    <div class="content">
      <canvas id="universe"></canvas>
      <canvas id="canvas"></canvas>
      <div id="footer" class="">
        <svg id="scene" x="0%" y="0%" width="300%" height="100%">
          <path id="ground" d="M0,316.4209c0,0,157.7119-35.416,469-56c7.3833-0.4883,23.7876-3.5488,31.3335-4.0166
            c3.7681-0.2334,19.4302,0.9424,28.3335,0.3506c17.1494-1.1396,30.9072-4.2734,38.333-4.6836
            c7.5972-0.4189,18.4058,0.3799,27.6665-0.9834c5.7075-0.8408,10.1318-4.042,14.9248-4.2705
            c7.8369-0.373,24.5693,3.6084,34.4087,4.2705c11.0586,0.7432,15.2656-1.8135,24.3335-2.1523c10.0576-0.376,20.4629,1.3867,28.6665,0
            c3.5957-0.6074,4.4194,0.4209,7.7227-0.7715c1.4927-0.5391,5.8179-3.5693,6.9438-4.2432c3.8335,0.667,6.1426-1.0732,9.917-1.167
            c2.2739-0.0566,3.9673-0.9072,6.249-0.9609c2.2725-0.0537,5.5547-1.2383,7.8345-1.2881c2.25-0.0498,3.498,1.0352,5.7554,0.9883
            c2.9648-0.0615,7.9341,0.3164,10.9111,0.2607c2.2461-0.042,2.4976-0.5195,4.7505-0.5586c2.9663-0.0518,2.1045-0.5615,5.0825-0.6074
            c1.5811-0.0244,6.9976,0.4131,8.582,0.3896c0.8887-0.0127,2.6113,0.373,3.5015,0.3604c1.5527-0.0215,2.2739-0.4404,3.8296-0.4609
            c1.416-0.0186,2.0854-0.8555,3.5039-0.873c1.0835-0.0127,2.9155,0.7939,4.0005,0.7813c1.1104-0.0127,3.5542,0.4805,4.666,0.4688
            c1.3047-0.0137,1.2773-0.5332,2.584-0.5459c1.415-0.0137,1.165-0.4414,2.5825-0.4541c0.916-0.0078,3.499,0.3984,4.416,0.3906
            c1.499-0.0127,1.833,0.6221,3.3345,0.6104c1.3296-0.0098,3.8267-0.666,5.1587-0.6748c1.3335-0.0088,2.8389-0.6514,4.1743-0.6592
            c1.3335-0.0078,2.4971,0.6191,3.8325,0.6123c2.5518-0.0127,7.3579,0.3965,9.9175,0.3877c5.3169-0.0176,5.5796-0.4063,10.9297-0.4063
            c1.8379,0,6.7031,1.3184,8.3203,1.2402c2.1055-0.1016,3.7139-1.6572,5.5283-1.7969c3.9541-0.3037,7.3262-0.5732,10.5986-0.2598
            c6.248,0.5977,12.1973-0.8125,21.207-0.7539c1.7266,0.0107,15.7813,3.085,17.5,3.0977c3.4014,0.0254,6.6191-1.3398,9.9971-1.3066c4.1221,0.041,8.2275,1.2529,12.3369,1.3066c2.0752,0.0273,4.1543-1.1084,6.2314-1.0771c3.3662,0.0498,4.5547,1.0166,7.9346,1.0771
            c2.1104,0.0381,6.4063-0.834,8.5264-0.792c2.7021,0.0537,4.4766-1.6729,7.2002-1.6113c2.9277,0.0654,7.6465,3.1641,10.6074,3.2393
            c4.8359,0.123,8.8809-0.9854,13.832-0.8359c2.5029,0.0752,11.8818,2.0498,14.375,2.1289c1.8398,0.0586,2.499-1.2188,4.334-1.1582
            c2.1689,0.0713,4.5049,1.209,6.666,1.2832c2.6699,0.0908,4.3398-0.916,6.998-0.8203c3.3379,0.1201,6.0566,1.3193,9.377,1.4453
            c4.001,0.1514,4.7764-1.1602,8.75-1c3.1836,0.1289,16.834,1.9912,20,2.125c4.0059,0.1699,4.0029-0.9004,7.9814-0.7227
            c6.8594,0.3076,7.9102,1.7656,14.6855,2.0977c8.916,0.4365,23.5254-0.2432,32.293,0.2344
            c6.7168,0.3662,13.3896,0.7432,20.0186,1.1318C1458.8545,268.4941,1680,316.4209,1680,316.4209H0z" />
          <path id="stone1" d="M680.3335,250.7549c7.3335,0.333,13.6665-1.2549,6-6.4609s-14.333-7.1221-18.6665,0.8359
            S680.3335,250.7549,680.3335,250.7549z" />
          <path id="stone2"
            d="M750.5,243.1709c3.25,0,2.5-3.707-1.75-4.2285s-5,3.7285-3,4.2285S750.5,243.1709,750.5,243.1709z" />
          <path id="stone3" d="M988.4893,243.8242c2.8857,0.3467,4.8438,1.2627,3.0107-2.0703s-7.3955,1.3555-5.2031,1.7129
            S988.4893,243.8242,988.4893,243.8242z" />
          <path id="stone4"
            d="M697,248.9355c2.0142-0.2021,2.1665-2.0156,1-2.1816s-9.1543,1.8398-5.9937,2.6699S697,248.9355,697,248.9355z" />
          <g id="greens" transform="translate(850, 180)">
            <g>
              <path d="M36.3877,59.4268C33.0576,18.9482,6.4658,4.522,6.4658,4.522s22.4834,16.1426,24.4414,54.2251
    C32.8657,96.8311,36.3877,59.4268,36.3877,59.4268z" />
              <path d="M41.8496,83.1641C31.1572,43.98,2.3711,34.6738,2.3711,34.6738s25.063,11.7471,33.9668,48.8271
    C45.2441,120.5791,41.8496,83.1641,41.8496,83.1641z" />
              <path d="M31.3955,60.7207C23.7139,25.7979,2.5381,16.9541,2.5381,16.9541s18.4165,10.9277,24.7925,43.9502
    C33.7061,93.9258,31.3955,60.7207,31.3955,60.7207z" />
              <path d="M40.4517,62.0068C47.9473,21.6187,25.4009,0.1914,25.4009,0.1914s18.0098,21.9634,9.7896,59.6357
    C26.9722,97.499,40.4517,62.0068,40.4517,62.0068z" />
              <path d="M41.9414,69.4316c13.0313-38.9565-6.3218-63.3062-6.3218-63.3062s14.7856,24.251,1.4141,60.4185
    C23.6621,102.709,41.9414,69.4316,41.9414,69.4316z" />
              <path d="M29.4976,87.9092c27.4097-30.5938,19.2993-60.6226,19.2993-60.6226s3.958,28.1255-22.6606,56.0249
    C-0.4775,111.2109,29.4976,87.9092,29.4976,87.9092z" />
              <animateTransform attributeName="transform" type="skewX" values="0;10;0" begin="0s" dur="5.5s"
                fill="freeze" repeatCount="indefinite" />
              <animateMotion type="translate" values="0,0;-10,0;0,0" begin="0s" dur="5.5s" fill="freeze"
                repeatCount="indefinite" />
            </g>
            <g>
              <path d="M34.9995,60.4189C56.0713,30.6665,46.1133,5.4014,46.1133,5.4014S52.2559,29.4746,31.6235,56.79
    C10.9917,84.1035,34.9995,60.4189,34.9995,60.4189z" />
              <path d="M36.3047,64.5391c28.4629-23.4443,25.3262-51.189,25.3262-51.189s-0.293,25.4971-27.6851,46.6538
    C6.5552,81.1631,36.3047,64.5391,36.3047,64.5391z" />
              <path d="M33.0449,70.502c31.4424-19.2637,32.1875-47.1748,32.1875-47.1748s-3.8291,25.208-33.897,42.3584
    C1.271,82.833,33.0449,70.502,33.0449,70.502z" />
              <path d="M13.8237,76.0244c36.5039-5.2158,48.2563-30.543,48.2563-30.543S48.5693,67.1045,14.168,70.9248
    C-20.2324,74.749,13.8237,76.0244,13.8237,76.0244z" />
              <animateTransform attributeName="transform" type="skewX" values="0;15;0" begin="0s" dur="5s" fill="freeze"
                repeatCount="indefinite" />
              <animateMotion type="translate" values="0,0;-15,0;0,0" begin="0s" dur="5s" fill="freeze"
                repeatCount="indefinite" />
            </g>
          </g>
          <g id="sign" transform="translate(700, 180)">
            <polygon points="21.2168,1.1143 20.6665,1.5459 19.7593,1.4473 19.229,1.4209 18.9707,1.6274 18.6665,1.9004 17.6865,1.9219
    37.3516,87.8877 40.8828,87.0791   " />
            <polygon points="45.4111,9.5537 2.4258,18.7158 1.563,18.498 1.4585,17.2114 0.8291,15.583 0.9165,14.3364 0.0908,12.6548
    0.2085,12.0864 -0.1924,11.5308 -0.3296,9.271 43.3408,-0.0376 43.4766,0.5015 43.334,0.9629 43.6533,1.2046 43.8232,1.8784
    43.8965,2.7754 44.2217,3.459 44.625,5.0576 45.041,7.5459 45.2637,7.5962 45.6191,9.0073  " />
            <polygon points="47.0078,20.8545 4.2368,29.5503 3.5933,28.5903 3.3965,26.9746 2.4683,24.5137 2.8398,24.1372 2.2676,23.7847
    1.9834,22.7563 2.2417,22.3394 1.7388,21.8706 1.2627,20.1426 44.8281,11.2852 45.082,12.4014 45.0723,12.9517 45.3281,13.481
    45.752,15.3369 46.0273,17.7524 46.4219,18.2803  " />
            <polygon points="47.666,31.168 4.7803,39.4023 4.251,37.4004 4.4429,36.1895 3.6465,35.1123 3.0142,32.7178 3.2754,32.1025
    2.7461,31.7046 2.2676,29.8945 45.9268,21.5107 46.0762,22.2007 45.9512,22.8423 46.2783,23.1372 46.6777,24.9795 46.5234,25.4795
    47.3027,27.8667 47.8086,30.2017   " />
          </g>
          <g id="boy_1_">
            <g id="boy">
              <path d="M800.7324,167.6929c0,0-7.9688-6.5039-9.7197-8.041c-1.751-1.5366-7.9331-6.5039-8.7197-13.0435
    c-0.7861-6.5396,6.0752-15.188,17.7969-16.1885c11.7207-1.0005,12.9727,1.0366,14.1514,2.7163
    c1.1787,1.6792,5.7178,11.1494,5.0752,18.6538c-0.6445,7.5049-5.6826,10.1133-9.7559,13.3652
    C805.4863,168.4072,800.7324,167.6929,800.7324,167.6929z" />
              <path
                d="M810.7031,169.2109c-1.0723-1.3037-1.3574-2.9556-1.1426-4.0645c0.2139-1.1084-8.041,0.1128-8.8281,2.542
    c1.6445,1.6787,0.751,3.146-0.5,4.1108c-1.25,0.9648-1.6797,1.502-1.9297,1.8237c0.0361,0.5361,0,0.9653,0,0.9653
    s-1.4297,1.7153-2.2871,6.5396s-0.6787,6.79-0.9648,8.3267c-0.2852,1.5366-1.4648,5.9678-1.751,10.292s0,4.5742,0,4.5742
    s1.251,1.7153,1.1436,4.0742s-1.2705,5.6099-1.2705,5.6099s0.2344,1.8945,1.8779,2.252c1.6445,0.3574,2.3594-0.6436,2.3594-0.6436
    s1.0713,1.3223,1.75,4.0742c0.6797,2.752,0.6436,6.79,1.8945,7.9688c1.251,1.1797,1.6074,0.3223,1.6074,0.3223
    s0.4648,3.3975-0.9277,6.6855c-1.3945,3.2881-4.1465,6.7568-4.1465,6.7568h11.0781c0,0,1.5723-3.5234-7.1113-2.2363
    c3.252-4.0742,3.8955-6.1934,4.0391-11.125c1.8223,0.5,4.252,0.6738,4.9316-0.3271c0.5352,1.3223,2.4297,2.1787,3.3584,1.7139
    c-0.2139,3.7168-1.0713,12.1846-1.0713,12.1846l9.0049,0.2852c0,0-0.751-3.2168-6.29-1.4307
    c1.001-6.7891,1.3584-11.5068,1.3584-11.5068s1.3584,0.1074,1.8584-0.3926c0.5-0.501,0.6787-5.3252-0.4648-9.9346
    c-1.1436-4.6104-0.5-4.4678-0.5-4.4678s1.75-0.8213,1.5-2.8584s-0.8574-3.6807-1.5352-5.5391
    c0.4639-0.1074,1-0.7861-0.6797-2.7158c-0.2148-2.5015-0.9648-6.3242-0.6436-7.6465s0.2148-2.8232-0.1787-4.3599
    c0-2.4302,0.7148-13.1509-1.25-17.0103c-1.9658-3.8594-2.5371-3.5737-2.5371-3.5737S812.5977,169.0142,810.7031,169.2109z" />
            </g>
            <g transform="translate(783, 122)">
              <g>
                <path d="M35.3506,17.9644c2.9834-3.71,5.9824-15.2095-3.1846-18.3765c2.668,3.833,1.168,5.6665,1.168,5.6665
    S32,1.2549,28.666-0.4121c1.5,3.1665,0,5,0,5S20.5,8.9209,24.5,13.2544S35.3506,17.9644,35.3506,17.9644z" />
                <animateTransform attributeName="transform" type="skewX" values="0;30;0" begin="0s" dur="4s"
                  fill="freeze" repeatCount="indefinite" />
                <animateMotion type="translate" values="0,0;-10,0;0,0" begin="0s" dur="4s" fill="freeze"
                  repeatCount="indefinite" />
              </g>
              <g>
                <path d="M27.125,6.2334c-1.8125-0.625-2.0625-1.9375-4.375-2.25c1,0.8125,1.125,1.6875,1.125,1.6875S21.5,4.3584,19.0625,3.9834
    c1.3125,0.75,2,1.875,2,1.875s-3.25-0.75-5.875-0.75c1.125,0.3125,1.125,0.6875,1.125,0.6875S10.75,5.8584,8.6875,7.4834
    c1,0.125,0.9375,0.6714,0.9375,0.6714s-4.25,1.5786-5.375,3.7661c0.875-0.4375-0.8125,1.8125-0.8125,1.8125s0.75,1.375-0.3125,1.125
    S0.5,14.1084,0.5,12.5459c-0.5,2.1875,0.6924,2.5767,1.4375,3.3125c-0.0625,1-0.9375,2.6494-1.25,2.106s0.8594,0.4282,0.0547,2.4731
    c-0.8047,2.0459-1.1533,3.7432-0.5103,6.5195s2.7056,4.5264,3.5181,6.2139s0.5-1.6875,0.5-1.6875L27.125,6.2334z" />
              </g>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</body>

源码下载

【博主推荐】html好看的个人主页(源码)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409055.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

牛客前端刷题(五)—— CSS相关概念

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏…

解决vue3+vite+TS 中使用element-plus按需引入 ElLoading、ElMessage 样式失效

ElMessage 样式失效 其实他不是失效了&#xff0c;只是加载到我们的 可以看到下面使用的方式和效果图&#xff0c;vue3的element-plus遇到的问题&#xff0c;因为要测试一下&#xff0c;所以点的频率比较大&#xff0c;但可以明显的看到ElMessage样式显示在你浏览器的下面 i…

echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理)

echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理) 前言 记录自己工作中的一点小心得&#xff0c;希望可以帮助有同样需求的朋友。 1.使用场景 之前我工作中有需要在图标中添加特殊标识的&#xff0c;我是费劲用散点图进行添加&#xff0c;十分麻烦。又比…

利用Vite或者webpack创建Vue项目,并启动Vue项目

文章目录背景环境准备准备Node.js和npm即可Vite打包webpack打包总结背景 大家好&#xff0c;我是杜晓帅~&#xff0c;一名Java开发程序员&#xff1b;最近想总结一下前端开发的一些东西&#xff0c;包括项目的打包和如何将后端处理的数据在前端进行一个展示&#xff0c;相信大家…

React 重新渲染指南

前言 老早就想写一篇关于React渲染的文章&#xff0c;这两天看到一篇比较不错英文的文章&#xff0c;翻译一下(主要是谷歌翻译&#xff0c;手动狗头)&#xff0c;文章底部会附上原文链接。 介绍 React 重新渲染的综合指南。该指南解释了什么是重新渲染&#xff0c;什么是必要…

前端后端的爱恨情仇

全文目录一、API爆炸的时代1.背景介绍2.问题引出3.解决方案二、核心功能1.API文档2.API调试3.Mock 数据4.自动化测试5. 在线调试三、其他功能1.代码生成2.数据导入/导出四、惊喜功能五、总结一、API爆炸的时代 随着最近行业的移动化、物联网化、数字化转型、微服务等多种概念的…

vue的脚手架安装及安装失败问题解决

vue的脚手架安装及安装失败问题解决 提示&#xff1a;本文是较为详细的vue脚手架安装教程及其问题解决&#xff0c;若需要快速使用的宝们请按照文章目录快速查找并使用相关代码 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文…

Node.js | 你不知道的 express 路由使用技巧

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript 学习笔记(十万字超详细知识点总结) 🧑‍💼 个人简介:大三学生,一个不甘平庸的平凡人🍬…

前端发送axios请求报错Request failed with status code 500解决方案

1.报错如下 2.因为后端的api是自己使用nodeexpress搭建的后台&#xff0c;然后要求请求头的参数格式为application/x-www-form-urlencoded的参数格式 打开报错请求 发现自己的请求头参数格式没有错误&#xff0c;jwt的身份验证也通过了&#xff0c;然后使用post测试接口&#x…

JavaScript之Ajax(一篇入门Ajax就够了)

一、概念 1.什么是Ajax Ajax&#xff08;Asynchronous Javascript And XML&#xff09;&#xff0c;即是异步的JavaScript和XML&#xff0c;Ajax其实就是浏览器与服务器之间的一种异步通信方式 异步的JavaScript 它可以异步地向服务器发送请求&#xff0c;在等待响应的过程…

vue3 + vite中开发环境和生产环境全局变量配置

目录一、开发环境和生产环境二、配置环境变量三、使用全局变量一、开发环境和生产环境 开发环境&#xff1a;也就是编码时运行的环境&#xff0c;即我们使用npm run dev或者npm run serve运行项目到本地时&#xff0c;项目处于的环境。 生产环境&#xff1a;项目部署到服务器…

07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用

目录前言主应用微应用部署前言 因为业务系统接入的需要&#xff0c;决定将一个vue3vitets的主应用系统&#xff0c;改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。 网上有很多关于微应用改造的案例&#xff0c;但很多都没写部署之后什么情…

web前端文件上传可选择的4种方式

在web前端开发中&#xff0c;文件上传属于很常见的功能&#xff0c;不论是图片、还是文档等等资源&#xff0c;或多或少会有上传的需求。一般都是从添加文件开始&#xff0c;然后读取文件信息&#xff0c;再通过一定的方式将文件上传到服务器上&#xff0c;以供后续展示或下载使…

WEB核心【记录网站登录人数,记录用户名案例】Cookie技术实现

目录 &#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &…

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

当我们拿到一个前端项目的时候&#xff0c;想要把它运行起来&#xff0c;首先是要给它安装依赖&#xff0c;即cd到当前项目根目录下去执行npm install命令&#xff0c;然后有一定几率在终端你会遇到这样的报错&#xff1a; npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to…

HTML基础————table标签

1.什么是table&#xff1f; table是html中的表格&#xff0c;由tr、td、th元素组成。 tr 元素定义表格行&#xff0c;th 元素定义表头&#xff0c;td 元素定义表格单元 2.可选的属性 属性描述border定义表格的边框cellpadding单元格内内容与单元格边的间距cellspacing单元格…

Vite配置环境变量

Vite配置代码环境变量和 Vue2 的配置差不多&#xff0c;都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解&#xff1a;环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建 .env.production 生产模式和 .env.development 开发模式两…

基于 vue3 element-plus 的暗黑模式

前言 element-plus2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加 dark 类&#xff0c;可以自行实现切换 但为了方便切换以及进一…

WEB核心【会话技术】第十五章

目录 &#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &…

【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64

一、前言 前端有个需求是要实现一个像微信一样&#xff0c;按住录音&#xff0c;松开发送语音&#xff0c;期间踩了不少坑&#xff0c;特地记录一下&#xff0c;主要用到两个库 js-audio-recorder &#xff1a;负责录制音频&#xff0c;支持的格式只有wav、pcmLAMPjs &#x…