炫酷的渐变背景

<div class="demo"></div>
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>

html {
background: #262626;
}
.demo {
margin: -12.5em -12.5em;
width: 25em;
height: 25em;
box-shadow: 0 0 2px #000;
background: repeating-linear-gradient(45deg, #dcdcdc, #dcdcdc 0.625em, #262626 0, #262626 1.25em) 100% 0em, repeating-linear-gradient(-45deg, #dcdcdc, #dcdcdc 0.625em, #262626 0, #262626 1.25em); /*左边和右边的背景渐变*/
background-repeat: no-repeat;
background-size: 50% 200%; /*背景宽高比例*/
animation: shift 0.5s linear infinite;

}
.demo,
.demo:before,
.demo:after {
box-sizing: border-box; /*border和padding计算入width之内   content-box，border和padding不计算入width之内   padding-box，padding计算入width内*/
position: absolute;
top: 50%;
left: 50%;
content: '';
}
.demo:before {
border: solid 0.625em #262626;
margin: -11.875em -11.875em;
width: 23.75em;
height: 23.75em;
}
.demo:after {
border: solid 0.625em #dcdcdc;
margin: -8em -8em;
width: 16em;
height: 16em;
border-radius: 50%;
transform: scaleY(-1); /*缩小负一，相当于反转180度*/
background: inherit; /*背景继承*/
}
@keyframes shift {
to {
background-position: 100% -1.76777em, 0 -1.76777em; /*移动背景*/
}
}

.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}