炫酷的渐变背景

最新推荐文章于 2024-07-25 22:27:14 发布

原创最新推荐文章于 2024-07-25 22:27:14 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

20 篇文章

订阅专栏

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