炫酷的渐变背景

来源：互联网发布：淘宝网天猫女童装裙子编辑：程序博客网时间：2024/05/29 04:21

html：

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

css：

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;}

0 0