css布局实现一个带阴影展开立体宣传册效果代码-html代码-BFW代码库

css布局实现一个带阴影展开立体宣传册效果代码

代码语言：html

代码描述：css布局实现一个带阴影展开立体宣传册效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">


    <style>
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          height: 100vh;
          background-image: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);
          overflow: hidden;
          font-family: "Open Sans", sans-serif;
        }
        
        .stuff {
          position: absolute;
          bottom: 30px;
          width: 100%;
          text-align: center;
        }
        .stuff .pens {
          margin-right: 20px;
          text-decoration: none;
          font-size: 20px;
          color: #333;
        }
        .stuff .pens:hover {
          text-decoration: underline;
        }
        .stuff .fa-twitter {
          position: relative;
          top: 8px;
          color: #1DA1F2;
          font-size: 50px;
        }
        
        .brochure {
          display: flex;
          position: absolute;
          left: 100px;
          right: 0;
          bottom: 0;
          top: -200px;
          margin: auto;
          justify-content: center;
          height: 250px;
          width: 1280px;
          perspective: 2000px;
        }
        @media screen and (max-width: 1228px) {
          .brochure {
            width: 960px;
          }
        }
        .brochure__pages {
          position: relative;
          height: 250px;
          width: calc(100% / 6);
          overflow: hidden;
        }
        .brochure__pages--page1 {
          transform: rotateY(-30deg);
          background-image: linear-gradient(to right top, #7A302B 0%, #A74131 84%);
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
          z-index: 10;
        }
        .brochure__pages--page1 .page1-logo {
          position: relative;
          margin: 30px 0 0 20px;
          width: 35px;
          height: 35px;
          border: 8px solid #191919;
        }
        .brochure__pages--page1 .page1-logo:after {
          content: "";
          display: block;
          position: absolute;
          top: -15px;
          right: -8px;
          width: 8px;
          height: 22px;
          background-color: #CFCDC3;
        }
        .brochure__pages--page1 .page1-logo:before {
          content: "";
          display: block;
          position: absolute;
          top: -8px;
          right: -15px;
          width: 22px;
          height: 8px;
          background-color: #CFCDC3;
        }
        .brochure__pages--page1 .page1-heading {
          margin: 15px 0 0 20px;
          text-transform: uppercase;
          color: #afafaf;
          font-size: 7px;
        }
        .brochure__pages--page1 .page1-text {
          margin: 3px 20px;
          text-transform: uppercase;
          color: #afafaf;
          font-size: 4px;
        }
        .brochure__pages--page1 .page1-footer {
          margin: 125px 0 0 20px;
          text-transform: uppercase;
          color: #afafaf;
          font-size: 4px;
        }
        .brochure__pages--page2, .brochure__pages--page4 {
          transform: rotateY(30deg);
          left: -2.2%;
          background-image: linear-gradient(to top, #F8EBE3 0%, #FFFFFF 100%);
          box-shadow: -110px 65px 180px -38px rgba(0, 0, 0, 0.5), 25px 40px 180px -38px r.........完整代码请登录后点击上方下载按钮下载查看