HTML背景切换效果,css网站背景渐变切换效果

body {

font-family:'华文仿宋';

font-size:20px;

font-weight:300;

overflow-x:hidden;

font-weight:bold;

}

.cb-slideshow-text-container {

height:100vh;

display:flex;

align-items:center;

}

.tm-content {

z-index:-9999;

}

.form-control::-webkit-input-placeholder {

/* Chrome/Opera/Safari */

color:white;

}

.form-control:-ms-input-placeholder {

/* IE 10+ */

color:white;

}

.form-control::placeholder {

color:white;

}

.form-control {

color:#FFFFFF;

border-radius:.5rem;

background-color:transparent;

border:1px solid #FFFFFF;

padding-top:10px;

padding-bottom:10px;

font-size:1.4rem;

font-weight:300;

padding:0.75rem 1.2rem;

}

.form-section {

color:#FFFFFF;

background-color:transparent;

margin-bottom:100px;

}

.fa {

color:#FFFFFF;

}

/* Animation */

.cb-slideshow,.cb-slideshow:after {

position:fixed;

width:100%;

height:100%;

top:0px;

left:0px;

z-index:-9999;

}

.cb-slideshow li {

width:100%;

height:100%;

position:absolute;

top:0px;

left:0px;

color:transparent;

background-size:cover;

background-position:50% 50%;

background-repeat:none;

opacity:0;

z-index:-9999;

-webkit-backface-visibility:hidden;

-webkit-animation:imageAnimation 72s linear infinite 0s;

-moz-animation:imageAnimation 72s linear infinite 0s;

-o-animation:imageAnimation 72s linear infinite 0s;

-ms-animation:imageAnimation 72s linear infinite 0s;

animation:imageAnimation 72s linear infinite 0s;

}

.cb-slideshow li:nth-child(1) {

background-image:url(https://picsum.photos/id/260/1024/768)

}

.cb-slideshow li:nth-child(2) {

background-image:url(https://picsum.photos/id/261/1024/768);

-webkit-animation-delay:12s;

-moz-animation-delay:12s;

-o-animation-delay:12s;

-ms-animation-delay:12s;

animation-delay:12s;

}

.cb-slideshow li:nth-child(3) {

background-image:url(https://picsum.photos/id/262/1024/768);

-webkit-animation-delay:24s;

-moz-animation-delay:24s;

-o-animation-delay:24s;

-ms-animation-delay:24s;

animation-delay:24s;

}

.cb-slideshow li:nth-child(4) {

background-image:url();

animation-delay:36s;

}

.cb-slideshow li:nth-child(5) {

background-image:url();

animation-delay:48s;

}

.cb-slideshow li:nth-child(6) {

background-image:url();

animation-delay:60s;

}

@keyframes imageAnimation {

0% {

opacity:0;

animation-timing-function:ease-in;

}

8% {

opacity:1;

transform:scale(1.15);

animation-timing-function:ease-out;

}

17% {

opacity:1;

transform:scale(1.20);

}

25% {

opacity:0;

transform:scale(1.40);

}

100% {

opacity:0

}

}@media screen and (max-width:1140px) {

.cb-slideshow li div h3 {

font-size:140px

}

}@media screen and (max-width:600px) {

.cb-slideshow li div h3 {

font-size:80px

}

.tm-content {

margin-top:80px;

}

}@media screen and (max-width:576px) {

.cb-slideshow li div h3 {

font-size:80px

}

.tm-btn-subscribe {

margin-top:20px;

}

}border-bottom:0}address {

margin-bottom:1rem;

font-style:normal;

line-height:inherit

}

dl,ol,ul {

margin-top:0;

margin-bottom:1rem

}

ol ol,ol ul,ul ol,ul ul {

margin-bottom:0

}

dt {

font-weight:700

}

dd {

margin-bottom:.5rem;

margin-left:0

}

blockquote {

margin:0 0 1rem

}

dfn {

font-style:italic

}

b,strong {

font-weight:bolder

}

small {

font-size:80%

}

sub,sup {

position:relative;

font-size:75%;

line-height:0;

vertical-align:baseline

}