css实现带导航全屏图文幻灯片切换效果代码
代码语言：html
所属分类：幻灯片
代码描述：css实现带导航全屏图文幻灯片切换效果代码，显示切换进度。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
<style>
/* General Variables */
/* General Styles */
body {
margin: 0 auto;
padding: 0;
font-size: 16px;
background: #fff;
}
body section {
display: block;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body ul,
body li {
margin: 0;
padding: 0;
}
body h1 {
font-family: Montserrat, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
body h2 {
font-family: Montserrat, sans-serif;
font-size: 1.875em;
font-weight: 700;
text-transform: uppercase;
}
body h3 {
font-family: 'Kaushan Script', cursive;
font-size: 1.5em;
font-weight: 400;
}
body h4 {
font-family: Montserrat, sans-serif;
font-size: 0.875em;
font-weight: 400;
text-transform: uppercase;
}
body p {
line-height: 150%;
font-family: Roboto, sans-serif;
font-size: 0.9375em;
color: #999;
}
body li {
list-style-type: none;
}
body a {
text-decoration: none;
}
.bg-wrapper {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
}
.section-header {
padding-top: 5.625em;
text-align: center;
}
.section-header h3 {
margin-bottom: 0.5em;
}
.section-header .line-red {
margin: 2.5em auto 2.9375em auto;
}
.line-red {
display: block;
width: 4em;
height: 0.1875em;
margin: 0 auto;
background: #f38181;
}
/* Main Header Styles */
.main-header {
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
font-family: Montserrat, sans-serif;
color: #fff;
background: transparent;
}
.main-header .header-wrapper {
display: block;
width: 70%;
margin: 0 auto;
padding-top: 1em;
}
.main-header .header-wrapper .main-logo {
float: left;
font-weight: 700;
font-size: 1.875em;
}
.main-header .header-wrapper .main-menu {
float: right;
text-align: center;
}
.main-header .header-wrapper .main-menu li {
display: inline-block;
padding: 0.75em 1.875em;
}
.main-header .header-wrapper .main-menu li a {
padding-bottom: 0.75em;
text-transform: uppercase;
color: #fff;
font-size: 0.875em;
}
.main-header .header-wrapper .main-menu li a:hover {
color: #fce38a;
border-bottom: 0.1875em solid #fce38a;
transition: 0.1s;
}
.main-header .header-wrapper .main-menu li a span {
font-size: 1.2em;
}
.main-header .header-wrapper .main-menu li:last-child {
padding: 0.75em 0;
}
.main-header .header-wrapper .main-menu li:nth-child(6) a:hover,
.main-header .header-wrapper .main-menu li:last-child a:hover {
border: none;
}
/* Section-1 Styles */
#section-1 {
height: 38em;
color: #fff;
background-color: #222;
}
#section-1 .content-slider {
position: relative;
width: 100%;
height: 100%;
}
#section-1 .content-slider input {
display: none;
}
#section-1 .content-slider .slider {
position: relative;
width: inherit;
height: inherit;
overflow: hidden;
}
#section-1 .content-slider .slider .banner {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 0;
width: inherit;
height: inherit;
text-align: center;
background-repeat: no-repeat;
background-position: 50% 50%;
transition: all 0.5s ease;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper {
height: 100%;
padding-top: 6em;
background-image: linear-gradient(rgba(243, 129, 129, 0.9), rgba(252, 227, 138, 0.9));
box-sizing: border-box;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper h2 {
padding-bottom: 0.3em;
font-family: 'Kaushan Script', cursive;
font-weight: 400;
font-size: 2.5em;
text-transform: none;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper h1 {
font-size: 6em;
line-height: 95%;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .line {
display: block;
width: 4em;
height: 0.1875em;
margin: 2.5em auto;
background: #fff;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button {
padding-bottom: 5em;
z-index: 15 !important;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button a {
padding: 0.5em 2em;
text-align: center;
font-family: Montserrat, sans-serif;
font-size: 0.875em;
color: #fff;
text-transform: uppercase;
border: 0.1875em solid #fff;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button a:hover {
color: #e88382;
border-color: #e88382;
transition: 0.3s;
}
#section-1 .content-slider .slider #top-banner-1 {
background: url('//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png') no-repeat center center;
background-size: cover;
}
#section-1 .content-slider .slider #top-banner-2 {
background: url('//repo.bfw.wiki/bfwrepo/image/5e3632bed9568.png') no-repeat center center;
background-size: cover;
}
#section-1 .content-slider .slider #top-banner-3 {
background: url('//repo.bfw.wiki/bfwrepo/image/5e5314d9c6386.png') no-repeat center center;
background-size: cover;
}
#section-1 .content-slider .slider #top-banner-4 {
background: url('//repo.bfw.wiki/bfwrepo/image/5e5ef121633fa.png') no-repeat center center;
background-size: cover;
}
#section-1 .content-slider nav {
position: absolute;
bottom: 0.5em;
width: 100%;
z-index: 10;
text-align: center;
}
#section-1 .content-slider nav .controls {
display: block;
width: 70%;
margin: 0 auto;
font-family: Montserrat, sans-serif;
color: #fff;
}
#section-1 .content-slider nav .controls label {
position: relative;
display: inline-block;
width: 20%;
height: 3.1em;
overflow: hidden;
margin: 0 1em;
padding-top: 1em;
text-align: left;
text-transform: uppercase;
font-family: Montserrat, sans-serif;
font-size: 1em;
color: #f6eac5;
font-weight: 400;
cursor: pointer;
transition: all 0.3s;
}
#section-1 .content-slider nav .controls label .progressbar {
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: #f6eac5;
z-index: 100;
}
#section-1 .content-slider nav .controls label .progressbar .progressbar-fill {
position: inherit;
width: inherit;
height: inherit;
margin-left: -100%;
background: #e88382;
}
#section-1 .content-slider nav .controls label span {
font-size: 1.4em;
font-weight: 700;
}
#section-1 .content-slider nav .controls label:hover {
color: #e88382;
}
#section-1 .content-slider #banner1:checked ~ .slider #top-banner-1,
#section-1 .content-slider #banner2:checked ~ .slider #top-banner-2,
#section-1 .content-slider #banner3:checked ~ .slider #top-banner-3,
#section-1 .content-slider #banner4:checked ~ .slider #top-banner-4 {
opacity: 1;
z-index: 1;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1),
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2),
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3),
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) {
cursor: default;
color: #fff;
transition: all 0.5s;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1) .progressbar,
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2) .progressbar,
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3) .progressbar,
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) .progressbar {
background: #fff;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1) .progressbar-fill,
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2) .progressbar-fill,
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3) .progressbar-fill,
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) .progressbar-fill {
animation: progressBarFill 5s linear;
}
/* Animations */
@keyframes progressBarFill {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
/* Media Queries */
@media only screen and (min-width: 1920px) {
body {
f.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0