css实现自然探险相册效果代码-html代码-BFW代码库

css实现自然探险相册效果代码

代码语言：html

代码描述：css实现自然探险相册效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap" rel="stylesheet">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,400i,700'>

    <style>
        * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
        }
        
        html {
                height: 100%;
        }
        
        body {
                height: 100%;
                background-image: url('//repo.bfw.wiki/bfwrepo/image/643bc3f8567d1.png');
                background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        
        .wrapper {
                display: flex;
                flex-direction: column;
                background-color: rgba(17, 15, 13, 0.9);
        }
        
        header {
                padding: 50px 30px;
        }
        
        .container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 1440px;
                margin: 0 auto;
        }
        
        .gallery_title {
        /*      height: 30vh; */
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
                flex: 1;
                font-family: 'Rubik Moonrocks', cursive;
                letter-spacing: 12px;
        }
        
        .gallery_title h1 {
                margin: 0;
          font-size: 11vw;
                padding: 10vh 0;
          color: transparent;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/643bc3d2890a6.png");
          background-repeat: repeat;
          -webkit-background-clip:text;
          animation: animate 120s ease-in-out infinite;
          text-align: center;.........完整代码请登录后点击上方下载按钮下载查看