readMe、profile美化。

news2024/11/28 16:37:57

在这里插入图片描述

GitHub的profile美化，第一步：创建与个人账号一致的仓库。然后就会自动展示于个人首页、再新建readme.md文档，添加照片信息即可。（动态效果是用svg实现的）

一、上波浪svg代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index:1;position:relative" width="854" height="200" viewBox="0 0 854 200">
    <style>
                .text {
            font-size: 70px;
            font-weight: 700;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
        }
        .desc {
            font-size: 20px;
            font-weight: 500;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
        }

            </style>
    <g transform="translate(427, 100) scale(1, 1) translate(-427, -100)">

                    <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#B993D6"/><stop offset="100%" stop-color="#8CA6DB"/>
        </linearGradient>
    </defs>

                    <path d="" fill="url(#linear)" opacity="0.4" >
    <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z;M0 0L 0 145Q 213.5 160 427 140T 854 130L 854 0 Z;M0 0L 0 165Q 213.5 135 427 165T 854 130L 854 0 Z;M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z"></animate>
</path>
<path d="" fill="url(#linear)" opacity="0.4" >
    <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z;M0 0L 0 150Q 213.5 120 427 120T 854 140L 854 0 Z;M0 0L 0 145Q 213.5 125 427 150T 854 165L 854 0 Z;M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z"></animate>
</path>
    </g>

            <text text-anchor="middle" alignment-baseline="middle" x="50%" y="30%" class="text" style="fill:#f7f5f5;" stroke="#none" stroke-width="10" > Welcome to my profile!</text>

</svg>

二、下波浪svg代码

<svg viewBox="0 0 115 25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>

svg {
  width:110vw;
  position:fixed;
  top:-5px;
  transform: rotate(360deg);
  overflow:visible;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #000;  
}

.wave:hover {
  fill: #fff;
}

#wave2 {
  animation-duration:6s;
  animation-direction: reverse;
  opacity: .9;
}

#wave3 {
  animation-duration: 3s;
  opacity:.6;
}

@keyframes wave {
  to {transform: translateX(-100%);}
}

</style>

 <defs> 
    <filter id="anim">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="
           1 0 0 0 0  
           0 1 0 0 0  
           0 0 1 0 0  
           0 0 0 13 -9" result="anim" />
      <xfeBlend in="SourceGraphic" in2="anim" />
  	</filter>
    <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
  </defs> 
  <use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use>
  <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use> 
</svg>