css

红色 #ED5565
深灰色 #4F4F4F
黑色 #393939
动画 cubic-bezier(0.620, 0.935, 0.690, 0.990)

http://web.chacuo.net/css3beziertool/

分割线

  <div class="separator-op"/>  

.separator-op {
	position: relative;
	border-bottom: 1px solid #e4eaf1;
	background: linear-gradient(white, #f7f7f7);
	height: 7px;
	z-index: -3;
	border-bottom: 1px solid #e4eaf1;
}

.separator-op:before, .separator-op:after {
	content: "";
	margin-left: 0;
	width: 14%;
	height: 7px;
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
	margin-top: -5px;
	position: absolute;
	top: 6px;
}

.separator-op:after {
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
	right: 0em;
}

美化滚动条

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

最简单的动画

transition: 0.25s;

好看的颜色

color: [
                  "#5470c6",
                  "#91cc75",
                  "#fac858",
                  "#ee6666",
                  "#73c0de",
                  "#3ba272",
                  "#fc8452",
                  "#9a60b4",
                  "#ea7ccc"
 ],

丝滑第一步

.app-menu {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}