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;
          text-transform: uppercase;
        	-webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        text-shadow: -5px 5px 2px rgba(143, 129, 122,0.2);
        }
        
          @keyframes animate {
            0%, 100% {
              background-position: left top;
            }
            25%{
              background-position: right top;
             }
            50% {
              background-position: left center;
            }
            75% {
              background-position: right center;
            }   
        }
        
        main {
        	flex: 1;
        	max-width: 1200px;
        	margin: 0 auto;
        	padding: 20px;
        }
        
        .gallery {
        	display: grid;
        	grid-gap: 30px;
        	padding: 0 5vw 10vh 5vw;
        }
        
        .gallery img {
        	width: 100%;
        	height: 50vh;
        	object-fit: cover;
        	border: 15px .........完整代码请登录后点击上方下载按钮下载查看