css实现视觉滚动差异咖啡页面效果代码-html代码-BFW代码库

css实现视觉滚动差异咖啡页面效果代码

代码语言：html

代码描述：css实现视觉滚动差异咖啡页面效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body, html {
          height: 100%;
          margin: 0;
          font: 400 15px/1.8 "Lato", sans-serif;
          color: #777;
        }
        
        .bgimg-1, .bgimg-2, .bgimg-3 {
          position: relative;
          opacity: 0.65;
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        
        }
        .bgimg-1 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/6295449630875.png");
          min-height: 100%;
        }
        
        .bgimg-2 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/62954536cd5dd.png");
          min-height: 400px;
        }
        
        .bgimg-3 {
          background-image: url("//repo.bfw.wiki/bfwrepo/image/6295471fb2bd7.png");
          min-height: 400px;
        }
        
        .caption {
          position: absolute;
          left: 0;
          top: 50%;
          width: 100%;
          text-align: center;
          color: #000;
        }
        
        .caption span.border {
          background-color: #111;
          color: #fff;
          padding: 18px;
          font-size: 25px;
          letter-spacing: 10px;
        }
        
        h3 {
          letter-spacing: 5px;
          text-transform: uppercase;
          font: 20px "Lato", sans-serif;
          color: #111;
        }
        
        /* Turn off parallax scrolling for tablets and phones */
        @media only screen and (max-device-width: 1024px) {
          .bgimg-1, .bgimg-2, .bgimg-3 {
            background-attachment: scroll;
          }
        }
    </style>


</head>

<body>
    <div class="bgimg-1">
        <div class="caption">
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">NIZA</span><br>
            <span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">coffe to go</span>
        </div>
    </div>

    <div style="color: #777;background-color:white;text-align:center;padding:50.........完整代码请登录后点击上方下载按钮下载查看