updated Demo样式细节优化

static/image/bg.svg

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="1440px" height="448px" viewBox="0 0 1440 448" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>编组 5备份</title>
+    <title>Background</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <linearGradient x1="-5.68700053%" y1="45.5298642%" x2="84.7892757%" y2="53.934985%" id="linearGradient-1">
@@ -27,11 +26,11 @@
             <stop stop-color="#D2ECFF" stop-opacity="0.225387893" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="导航方案备份">
-            <g id="编组-5备份">
-                <g id="路径备份">
-                    <g id="蒙版">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
                         <g transform="translate(0.000000, 0.000000)">
                             <mask id="mask-4" fill="white">
                                 <use xlink:href="#path-3"></use>
@@ -40,15 +39,15 @@
                                 <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
                                 <use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
                             </g>
-                            <g id="矩形备份-32" mask="url(#mask-4)">
+                            <g mask="url(#mask-4)">
                                 <use fill="url(#linearGradient-5)" xlink:href="#path-7"></use>
                                 <use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
                             </g>
-                            <rect id="矩形" fill="url(#linearGradient-8)" mask="url(#mask-4)" x="0" y="166" width="1440" height="282"></rect>
+                            <rect fill="url(#linearGradient-8)" mask="url(#mask-4)" x="0" y="166" width="1440" height="282"></rect>
                         </g>
                     </g>
                 </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

static/style/index.css

@@ -22,9 +22,7 @@ a:hover{
     text-decoration: underline;
 }
 
-.wrapper{
-    background: url('../image/bg.svg') center top repeat-x;
-}
+
 .header{
     margin-bottom: 15px;
 }
@@ -37,6 +35,62 @@ a:hover{
     margin: 0 auto;
 }
 
+.mod-bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 500px;
+    width: 100%;
+    z-index: -1;
+    background: url('../image/bg.svg') center top repeat-x;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.mod-bg:after {
+    display: block;
+    width: 100%;
+    height: 360px;
+    content: '';
+    margin-bottom: -240px
+}
+.mod-bg .waves {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    min-height: 80px;
+    max-height: 120px;
+    z-index: 0
+}
+.mod-bg .parallax>use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.1) infinite
+}
+.mod-bg .parallax>use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s
+}
+.mod-bg .parallax>use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s
+}
+.mod-bg .parallax>use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s
+}
+.mod-bg .parallax>use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s
+}
+@keyframes move-forever {
+    0% {
+        transform: translate3d(-90px, 0, 0)
+    }
+    100% {
+        transform: translate3d(85px, 0, 0)
+    }
+}
+
 .mod-head .bd{
     height: 36px;
     padding: 10px 0;
@@ -151,7 +205,6 @@ a:hover{
 .mod-panel .hd .picture{
     position: relative;
     width: 400px;
-    padding-top: 15px;
     text-align: center;
 }
 .mod-panel .hd .picture img{
@@ -161,11 +214,11 @@ a:hover{
     display: inline-block;
     height: 36px;
     margin-top: -20px;
-    padding: 0 20px;
+    padding: 0 24px;
     background: #2095f2;
     border: 1px solid rgba(0,0,0,0.05);
-    border-radius: 6px;
-    line-height: 36px;
+    border-radius: 18px;
+    line-height: 34px;
     text-decoration: none;
     text-align: center;
     font-size: 15px;
@@ -368,10 +421,10 @@ a:hover{
     width: 33.33%;
 }
 .mod-intro .bd .item{
-    padding: 15px 12px;
+    padding: 15px;
     margin: 0 5px 10px;
     background: rgb(246, 248, 250);
-    border-radius: 5px;
+    border-radius: 12px;
 }
 .mod-intro .bd p{
     line-height: 22px;