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