css响应式自适应卡片布局效果代码-html代码-BFW代码库

css响应式自适应卡片布局效果代码

代码语言：html

所属分类：响应式

代码描述：css响应式自适应卡片布局效果代码，鼠标悬浮卡片有阴影效果。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --color-1: #07363F;
          --color-2: #FF9901;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          margin: 0;
          padding: 0;
          color: var(--color-1);
          line-height: 1.6;
        }
        
        h1 {
          font-size: 2rem;
          font-size: clamp(2rem, 1.2rem + 2.66vw, 4rem);
          margin: 0.3em 0 0.1em 0;
        }
        
        h2 {
          font-size: 1.5rem;
          font-size: clamp(1.5rem, 1.1rem + 1.33vw, 2.5rem);
          margin: 0.3em 0 0.1em 0;
        }
        
        p {
          max-width: 900px;
        }
        
        section {
          padding: 30px;
        }
        
        #section-one {
          background-color: var(--color-1);
          color: white;
        }
        
        #section-two {
          background: black;
          background: linear-gradient(180deg, var(--color-1) 0%, var(--color-1) 50%, var(--color-2) 50%, var(--color-2) 100%);
        }
        
        #section-tree {
          background-color: var(--color-2);
        }
        
        .container {
          width: 90%;
          max-width: 1440px;
          margin: auto;
        }
        
        .card-wrapper {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 30px;
        }
        
        .card {
          background: white;
          padding: 20px;
          border-radius: 10px;
          box-shadow: 0px 30px 50px -25px #ad3500;
          position: relative;
          transition: all 0.3s ease;
          top: 0;
        }
        .card p {
          opacity: 0.6;
          transition: all 0.3s ease;
        }
        .card:hover {
          box-shadow: 0px 50px 75px -25px #ad3500;
          top: -20px;
        }
.........完整代码请登录后点击上方下载按钮下载查看