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 }
更新时间:2020-08-04 11:52:05
.cb-slideshow li:nth-child(5) {background-image: url();}
将图片地址放入url( )中,4,5,6图片请自行添加。
2.将css引入,html中加入
<ul class="cb-slideshow"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>