css实现带导航全屏图文幻灯片切换效果代码-html代码-BFW代码库

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-he.........完整代码请登录后点击上方下载按钮下载查看