readMe、profile美化。

Myth丶恋晨 2023-10-14 17:19 34阅读 0赞

![在这里插入图片描述][01834d59b2274839a17bfe9d79163c8f.png]

*  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>

### 三、如何放到md文档？ ###

新建svg文件，把代码放进去即可。

[01834d59b2274839a17bfe9d79163c8f.png]: https://img-blog.csdnimg.cn/01834d59b2274839a17bfe9d79163c8f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关美化Windows

更改壁纸 [https://www.omgubuntu.co.uk/2010/09/a-look-back-at-every-ubuntu-default-wallpap

Love The Way You Lie/ 2023年10月10日 09:24/ 0 赞/ 24 阅读

相关 linux系统美化

文章目录 1 效果预览 2 具体步骤 2.1 桌面美化 2.2 图标美化和shell美化 2.3 开机界面美化 1

小咪咪/ 2022年10月27日 01:33/ 0 赞/ 191 阅读

相关 android edittext 美化,android EditText的美化

使用alloctor模板来实现string类虽然以前做过更复杂的各种数据结构,不过那只是在看完c++prime7章后做的,没有考虑到类的拷贝体现出来是类值还是类指针,于是写

爱被打了一巴掌/ 2022年10月05日 01:50/ 0 赞/ 262 阅读

相关 Javascript在线美化，格式化,js美化

Javascript在线美化，格式化 [http://www.css88.com/tool/js\_beautify/][http_www.css88.com_tool_js

旧城等待，/ 2022年08月18日 00:57/ 0 赞/ 148 阅读

相关 SWING界面美化

Synth——它是 Java 5.0 中为 Swing 引入的最新内容。通过为 Java UI 编程引入“皮肤”的概念，Synth 使开发人员可以为应用程序创建和部署定制的外观

客官°小女子只卖身不卖艺/ 2022年04月14日 05:24/ 0 赞/ 401 阅读

相关 eclipse 美化

介绍一个插件，有了之后再也不用羡慕vim的漂亮界面了。 http://eclipsecolorthemes.org/ 截个图： ![Center][] 有两种办法可以利

比眉伴天荒/ 2022年03月11日 14:47/ 0 赞/ 385 阅读

相关 eclipse 美化

介绍一个插件，有了之后再也不用羡慕vim的漂亮界面了。 http://eclipsecolorthemes.org/ 截个图： ![Center][] 有两种办法可以利

忘是亡心i/ 2022年03月11日 14:28/ 0 赞/ 298 阅读

相关 WPF-按钮美化

　　我们不多哔哔，先放图： ![1699486-20190527161453388-1302609105.png][] 美化按钮背景：　　当我们用系统默认的按钮

女爷i/ 2021年12月20日 04:15/ 0 赞/ 727 阅读

相关美化盒子

第一部分字体大小【font-size】含义：字符框的高度、可继承、默认值：medium 取值：medium：中等字号、larger：大字号、smaller：小字号

骑猪看日落/ 2021年10月26日 22:52/ 0 赞/ 368 阅读

相关美化盒子

美化盒子美化文本第一部分字体大小（font-size）默认值：medium：中等字号 larger：大字号 smaller：小字号数值 px【常用】：绝对字体

妖狐艹你老母/ 2021年10月26日 15:46/ 0 赞/ 363 阅读