优化页面流畅度

themes/yilia/source-src/css/article-main.scss

@@ -12,7 +12,7 @@
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ddd;
-  background: $colorBg;
+  background: #{$colorBg}cc;
   @extend %trans;
   img{
     max-width: 100%;

themes/yilia/source-src/css/core/_animation.scss

@@ -257,22 +257,18 @@
 @keyframes leftIn {
   from {
     transform: translate(0, 0);
-    background:$colorBodyBg;
   }
   to {
     transform: translate(333px, 0);
-    background: none;
   }
 }
 
 @keyframes leftOut {
   from {
     transform: translate(333px, 0);
-    background: none;
   }
   to {
     transform: translate(0, 0);
-    background:$colorBodyBg;
   }
 }
 

themes/yilia/source-src/css/grid.scss

@@ -20,21 +20,19 @@ html, body, #container {
 #container{
 	position:relative;
 	min-height:100%;
-  background: linear-gradient(200deg,#5aa5c6,#a4854b);
   scroll-behavior: smooth;
 	-webkit-overflow-scrolling: touch;
+	background: $colorBodyBg url(http://photo.colorfulsweet.site/2019/08/29/4f8a91881d2a4.png) no-repeat;
+	background-size: contain;
+	background-position: right;
 	overflow-scrolling: touch;
-	.anm-canvas {
-		display: none;
-	}
   &.show {
-    overflow-y: hidden;
-    .anm-canvas {
-      display: block;
-      position: fixed;
-    }
+		overflow-y: hidden;
   }
 }
+body:not(.night) #container.show {
+	background: linear-gradient(200deg,#5aa5c6,#a4854b);
+}
 .body-wrap{
   padding-top: 30px;
   margin-bottom: 80px;
@@ -43,15 +41,14 @@ html, body, #container {
 	position:absolute;
 	right:0;
 	min-height:100%;
-	background:$colorBodyBg;
 	left: 300px;
   width: auto;
-	@extend %trans;
 	&.show {
     @extend %anmLeftIn;
 		.article {
-      transition: opacity .3s ease-in, background-color .3s ease-in;
-      opacity: 0.6 !important;
+			@extend %trans;
+      // transition: opacity .3s ease-in, background-color .3s ease-in;
+      opacity: 0.5 !important;
       pointer-events: none;
 		}
 	}

themes/yilia/source-src/css/mobile.scss

@@ -2,6 +2,9 @@
   padding-top: 0;
   margin-bottom: 0;
 }
+#container {
+  background: $colorBodyBg;
+}
 .left-col {
   display: none;
 }
@@ -117,6 +120,7 @@
   padding: 10px;
   border: 0;
   font-size: 16px;
+  background: #{$colorBg};
   .article-more-link {
     margin: 0;
   }

themes/yilia/source-src/css/night.scss

@@ -41,22 +41,12 @@ $textColor_night: #d5d5d5; // 文字颜色
 body.night {
   background: $mainBg_night;
   // 展开菜单之后的背景
-  #container {
-    background: none;
-  }
-  // 主背景
-  .mid-col {
-    background: $mainBg_night;
-    &.show {
-      @extend %anmLeftIn_night;
-    }
-    &.hide {
-      @extend %anmLeftOut_night;
-    }
+  #container, #container.show {
+    background-color: $mainBg_night;
   }
   // 文章区域
   .article{
-    background: $articleBg_night;
+    background: #{$articleBg_night}cc;
     border-color: $borderColor_night;
     color: $textColor_night;
     .article-title { // 主标题