diff --git a/README.md b/README.md
index 68c744d3f3b35c0f7c99994cacca23a7c317cc98..44d3a1c35643998804db114f8e8b4048bba21fb5 100644
--- a/README.md
+++ b/README.md
@@ -1,520 +1,48 @@
-# CSS3实现的页面平滑效果
-    效果如下：
-![](gif.gif)
 
-    css代码
-```angularjs
-@font-face {
-    font-family: "Raphaelicons";
-    src:url("../fonts/raphaelicons-webfont.eot") format('eot'),
-        url("../fonts/raphaelicons-webfont.woff") format("woff"),
-        url("../fonts/raphaelicons-webfont.svg") format("svg"),
-        url("../fonts/raphaelicons-webfont.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
 
-}
-body{
-    font-family: Georgia,Serif;
-    background: #ddd;
-    font-weight: 400;
-    font-size: 15px;
-    color:#333;
-    overflow: hidden;
-    -webkit-font-smoothing: antialiased;
-    font-smoothing: antialiased;
-    /*CSS抗锯齿 font-smoothing 属性介绍*/
-    /*CSS3里面加入了一个“-webkit-font-smoothing”属性。*/
-    /*这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。*/
-    /*加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！*/
-    /*它有三个属性：*/
-    /*none                                     ------ 对低像素的文本比较好*/
-    /*subpixel-antialiased                ------默认值*/
-    /*antialiased                             ------抗锯齿很好*/
+# CSS3 实现的页面平滑效果
 
-}
-a{
-    text-decoration: none;
-    color:#555;
-}
-.clr{
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    clear: both;
-    padding: 0;
-    margin: 0;
-}
-.st-container{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    font-family: "Josefin Slab","Myrid Pro",Arial,sans-serif;
-}
-.st-container>input,
-.st-container>a{
-    width: 20%;
-    height: 34px;
-    line-height: 34px;
-    position: fixed;
-    bottom: 0;
-    cursor: pointer;
-}
-.st-container>input{
-    opacity: 0;
-    z-index: 1000;
-}
-.st-container>a{
-    z-index: 10;
-    font-weight: 700;
-    font-size: 16px;
-    background: #e23a6e;
-    text-align: center;
-    color:#fff;
-    text-shadow:1px 1px 1px rgba(151,24,64,0.2);
-}
-#st-control-1,#st-control-1+a{
-    left: 0%;
-}
-#st-control-2,#st-control-2+a{
-    left: 20%;
-}
-#st-control-3,#st-control-3+a{
-    left: 40%;
-}
-#st-control-4,#st-control-4+a{
-    left: 60%;
-}
-#st-control-5,#st-control-5+a{
-    left: 80%;
-}
-.st-container input:checked+a,
-.st-container input:checked:hover+a{
-    background: #821e34;
-}
-.st-container input:checked+a:after{
-    content: "";
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    border:20px solid transparent;
-    border-bottom-color: #821134;
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left:-20px;
-}
-.st-container input:hover+a{
-    background: #ad244f;
-}
-/*内容*/
-.st-scroll,
-.st-panel{
-    width: 100%;
-    height: 100%;
-    position:relative;
-}
-.st-scroll{
-    left: 0;
-    top: 0;
-    -webkit-transform: translate3d(0,0,0);
-    -moz-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
-    -o-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
-    -webkit-backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -ms-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transition: all 0.6s ease-in-out;
-    -moz-transition: all  0.6s ease-in-out;
-    -ms-transition: all  0.6s ease-in-out;
-    -o-transition: all  0.6s ease-in-out;
-    transition: all  0.6s ease-in-out;
-}
-.st-panel{
-    background: #fff;
-    overflow: hidden;
-}
-#st-control-1:checked~.st-scroll{
-    -webkit-transform: translateY(0%);
-    -moz-transform: translateY(0%);
-    -ms-transform: translateY(0%);
-    -o-transform: translateY(0%);
-    transform: translateY(0%);
-}
-#st-control-2:checked~.st-scroll{
-    -webkit-transform: translateY(-100%);
-    -moz-transform: translateY(-100%);
-    -ms-transform: translateY(-100%);
-    -o-transform: translateY(-100%);
-    transform: translateY(-100%);
-}
-#st-control-3:checked~.st-scroll{
-    -webkit-transform: translateY(-200%);
-    -moz-transform: translateY(-200%);
-    -ms-transform: translateY(-200%);
-    -o-transform: translateY(-200%);
-    transform: translateY(-200%);
-}
-#st-control-4:checked~.st-scroll{
-    -webkit-transform: translateY(-300%);
-    -moz-transform: translateY(-300%);
-    -ms-transform: translateY(-300%);
-    -o-transform: translateY(-300%);
-    transform: translateY(-300%);
-}
-#st-control-5:checked~.st-scroll{
-    -webkit-transform: translateY(-400%);
-    -moz-transform: translateY(-400%);
-    -ms-transform: translateY(-400%);
-    -o-transform: translateY(-400%);
-    transform: translateY(-400%);
-}
-.st-desc{
-    width: 200px;
-    height: 200px;
-    background: #fa96b5;
-    position: absolute;
-    top: 0;
-    left:50%;
-    margin-left:-100px;
-    -webkit-transform: translateY(-50%) rotate(45deg);
-    -moz-transform: translateY(-50%) rotate(45deg);
-    -ms-transform: translateY(-50%) rotate(45deg);
-    -o-transform: translateY(-50%) rotate(45deg);
-    transform: translateY(-50%) rotate(45deg);
-}
-[data-icon]:after{
-    content: attr(data-icon);
-    width: 200px;
-    height: 200px;
-    /*background: #0f0;*/
-    color:#fff;
-    font-size: 90px;
-    text-align: center;
-    line-height: 200px;
-    position:absolute;
-    left: 50%;
-    top: 50%;
-    margin:-100px 0 0 -100px;
-    -webkit-transform: rotate(-45deg) translateY(25%);
-    -moz-transform: rotate(-45deg) translateY(25%);
-    -ms-transform: rotate(-45deg) translateY(25%);
-    -o-transform: rotate(-45deg) translateY(25%);
-    transform: rotate(-45deg) translateY(25%);
-    font-family: "Raphaelicons";
-    text-shadow:1px 1px 1px rgba(151,24,64,0.2);
-}
-.st-panel h2{
-    color:#e23a6e;
-    font-size: 54px;
-    line-height: 54px;
-    text-align: center;
-    font-weight: 900;
-    width: 80%;
-    position: absolute;
-    left: 10%;
-    top: 50%;
-    margin-top:-70px;
-    text-shadow:1px 1px 1px rgba(151,24,64,0.2);
-    -webkit-backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -ms-backface-visibility: hidden;
-    backface-visibility: hidden;
-}
-#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
-#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
-#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
-#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
-#st-control-5:checked ~ .st-scroll #st-panel-5 h2
-{
-    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-    animation: moveDown 0.6s ease-in-out 0.2s backwards;
-}
-@keyframes moveDown {
-    0%{
-        transform: translateY(-40px);
-        opacity: 0;
-    }
-    100%{
-        transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-moz-keyframes moveDown {
-    0%{
-        -moz-transform: translateY(-40px);
-        opacity: 0;
-    }
-    100%{
-        -moz-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-ms-keyframes moveDown {
-    0%{
-        -ms-transform: translateY(-40px);
-        opacity: 0;
-    }
-    100%{
-        -ms-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-o-keyframes moveDown {
-    0%{
-        -o-transform: translateY(-40px);
-        opacity: 0;
-    }
-    100%{
-        -o-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-webkit-keyframes moveDown {
-    0%{
-        -webkit-transform: translateY(-40px);
-        opacity: 0;
-    }
-    100%{
-        -webkit-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-.st-panel p{
-    position: absolute;
-    width: 50%;
-    left: 25%;
-    top: 50%;
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0;
-    text-align: center;
-    color:#8b8b8b;
-    -webkit-backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -ms-backface-visibility: hidden;
-    backface-visibility: hidden;
-    margin-top: 10px;
-}
-#st-control-1:checked ~ .st-scroll #st-panel-1 p,
-#st-control-2:checked ~ .st-scroll #st-panel-2 p,
-#st-control-3:checked ~ .st-scroll #st-panel-3 p,
-#st-control-4:checked ~ .st-scroll #st-panel-4 p,
-#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-    -webkit-animation: moveUp 0.6s ease-in-out backwards;
-    -o-animation: moveUp 0.6s ease-in-out backwards;
-    animation: moveUp 0.6s ease-in-out backwards;
-}
-@keyframes moveUp {
-    0%{
-        transform: translateY(40px);
-        opacity: 0;
-    }
-    100%{
-        transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-webkit-keyframes moveUp {
-    0%{
-        -webkit-transform: translateY(40px);
-        opacity: 0;
-    }
-    100%{
-        -webkit-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-ms-keyframes moveUp {
-    0%{
-        -ms-transform: translateY(40px);
-        opacity: 0;
-    }
-    100%{
-        -ms-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-o-keyframes moveUp {
-    0%{
-        -o-transform: translateY(40px);
-        opacity: 0;
-    }
-    100%{
-        -o-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-@-moz-keyframes moveUp {
-    0%{
-        -moz-transform: translateY(40px);
-        opacity: 0;
-    }
-    100%{
-        -moz-transform: translateY(0px);
-        opacity: 1;
-    }
-}
-.st-color{
-    background: #fa96b5;
-}
-.st-color .st-desc{
-    background:#fff;
-}
-.st-color [data-icon]:after{
-    color:#fa96b5;
-}
-.st-color h2{
-    color:#fff;
-    text-shadow:1px 1px 1px rgba(151,24,64,0.2);
-}
-.st-color p{
-    color:rgba(255,255,255,0.8);
-}
-@media screen and (max-width: 520px){
-    .st-panel h2{
-        font-size: 42px;
-    }
-    .st-panel p{
-        width: 90%;
-        left: 10%;
-        margin-top: 0;
-    }
-    .st-container > a{
-        font-size: 13px;
-    }
-}
-@media screen and (max-width: 360px){
-    .st-panel h2{
-        font-size: 42px;
-    }
-    .st-panel p{
-        width: 90%;
-        left: 10%;
-        margin-top: 0;
-    }
-    .st-container > a{
-        font-size: 13px;
-    }
-    .st-desc{
-        width: 120px;
-        height: 120px;
-        margin-left: -60px;
-    }
-    [data-icon]:after{
-        font-size: 60px;
-        -webkit-transform: rotate(-45deg) translateY(15%);
-        -moz-transform: rotate(-45deg) translateY(15%);
-        -ms-transform: rotate(-45deg) translateY(15%);
-        -o-transform: rotate(-45deg) translateY(15%);
-        transform: rotate(-45deg) translateY(15%);
-    }
-}
-```    
+这是一个使用 CSS3 实现页面平滑滚动和动画效果的示例项目。通过纯 CSS 技术，可以实现页面中多个区块之间的平滑过渡效果，适用于滚动导航或单页应用的视觉优化。
 
-    html代码
-```angularjs
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>CSS3实现的页面平滑效果</title>
-    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrom=1">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-<div class="container">
-    <div class="st-container">
-        <!--nav-begin-->
-        <input type="radio" name="radio-set" checked="checked" id="st-control-1">
-        <a href="#st-panel-1">页面1</a>
-        <input type="radio" name="radio-set" id="st-control-2">
-        <a href="#st-panel-2">页面2</a>
-        <input type="radio" name="radio-set"  id="st-control-3">
-        <a href="#st-panel-3">页面3</a>
-        <input type="radio" name="radio-set"  id="st-control-4">
-        <a href="#st-panel-4">页面4</a>
-        <input type="radio" name="radio-set" id="st-control-5">
-        <a href="#st-panel-5">页面5</a>
-        <!--nav-end-content begin-->
-        <div class="st-scroll">
-            <section class="st-panel" id="st-panel-1">
-                <div class="st-desc" data-icon="H"></div>
-                <h2>标题一</h2>
-                <p>
-                    Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit.
-                    Asperiores dignissimos error maxime
-                    nemo nisi numquam quis ratione recusandae
-                    suscipit? Accusantium aliquid illo ipsa ipsum
-                    molestias ratione recusandae saepe sint
-                    voluptatum.
-                </p>
-            </section>
-            <section class="st-panel st-color" id="st-panel-2">
-                <div class="st-desc" data-icon="2"></div>
-                <h2>标题二</h2>
-                <p>
-                    Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit.
-                    Asperiores dignissimos error maxime
-                    nemo nisi numquam quis ratione recusandae
-                    suscipit? Accusantium aliquid illo ipsa ipsum
-                    molestias ratione recusandae saepe sint
-                    voluptatum.
-                </p>
-            </section>
-            <section class="st-panel" id="st-panel-3">
-                <div class="st-desc" data-icon="3"></div>
-                <h2>标题三</h2>
-                <p>
-                    Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit.
-                    Asperiores dignissimos error maxime
-                    nemo nisi numquam quis ratione recusandae
-                    suscipit? Accusantium aliquid illo ipsa ipsum
-                    molestias ratione recusandae saepe sint
-                    voluptatum.
-                </p>
-            </section>
-            <section class="st-panel st-color" id="st-panel-4">
-                <div class="st-desc" data-icon="4"></div>
-                <h2>标题四</h2>
-                <p>
-                    Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit.
-                    Asperiores dignissimos error maxime
-                    nemo nisi numquam quis ratione recusandae
-                    suscipit? Accusantium aliquid illo ipsa ipsum
-                    molestias ratione recusandae saepe sint
-                    voluptatum.
-                </p>
-            </section>
-            <section class="st-panel" id="st-panel-5">
-                <div class="st-desc" data-icon="5"></div>
-                <h2>标题五</h2>
-                <p>
-                    Lorem ipsum dolor sit amet,
-                    consectetur adipisicing elit.
-                    Asperiores dignissimos error maxime
-                    nemo nisi numquam quis ratione recusandae
-                    suscipit? Accusantium aliquid illo ipsa ipsum
-                    molestias ratione recusandae saepe sint
-                    voluptatum.
-                </p>
-            </section>
-        </div>
-    </div>
-</div>
-</body>
-</html>
-```    
+## 特点
 
+- 纯 CSS3 实现，无需 JavaScript
+- 使用 checkbox 控件控制页面滚动状态
+- 支持动画过渡效果，提升用户体验
+
+## 文件结构
+
+- `index.html`：主页面结构
+- `css/normalize.css`：样式重置文件，确保不同浏览器下的一致性
+- `css/style.css`：核心动画与滚动效果样式文件
+- `fonts/`：字体图标资源目录
+- `gif.gif`：动画效果演示
+
+## 使用方式
+
+1. 打开 `index.html` 文件，查看页面结构。
+2. 通过点击导航按钮，切换不同的 `#st-control-x` checkbox 状态，从而控制对应区块的滚动与动画效果。
+3. 所有动画和滚动效果通过 `style.css` 中的 `:checked` 伪类和过渡样式实现。
+
+## 核心实现
+
+- 使用 `<input type="radio">` 或 `<input type="checkbox">>` 控制页面状态。
+- 利用 CSS 的 `~` 选择器实现标签与内容区块之间的联动。
+- 通过 `transition` 和 `transform` 实现平滑滚动和动画效果。
+
+## 注意事项
+
+- 该项目仅使用 HTML 和 CSS，适合学习 CSS3 动画与布局技巧。
+- 不需要后端支持，直接在浏览器中打开即可运行。
+
+## 许可证
+
+该项目遵循 MIT 许可证。有关详细信息，请参阅 `fonts/license.txt` 文件。
+
+## 贡献指南
+
+如果你有兴趣为该项目做出贡献，请提交一个 Pull Request，或者提出你的改进建议。我们欢迎任何形式的贡献！
+
+## 示例截图
+
+![示例动画](gif.gif)
\ No newline at end of file