div+css布局实现炫酷堆叠阴影图文卡片效果代码-html代码-BFW代码库

div+css布局实现炫酷堆叠阴影图文卡片效果代码

代码语言：html

代码描述：div+css布局实现炫酷堆叠阴影图文卡片效果代码

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

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

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

  
  
<style>
@import url("https://fonts.cdnfonts.com/css/mona-sans");
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { overflow: hidden; }
body {
    min-height: 100vh;
    display: flex; flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center; margin: 0;
    background: #343434;
    background: linear-gradient(
        180deg,
        #343434 0%,
        #252525 100%
    );
    font-family: "Mona-Sans", sans-serif;
        font-family: "Mona Sans", sans-serif;
}
/* ///////////////////// */

.card {
    position: absolute;
    left: 0; right: 0;
    top: 19%; 
    margin: auto;
    width: 320px; height:350px;
    border-radius: 16px;
    background: #191919aa;
    background: linear-gradient(
        180deg,
        #292929aa 0%,
        #191919cc 50%
    );
    backdrop-filter: blur(4px);
    box-shadow: inset 0 2px 2px 0 #e7c4a088,
    inset 0 -2px 2px 0 #0003;
    
    color: #ccc;
    text-shadow: 1px 1px 3px #333a;
    padding: 24px;
    padding-right: 42px;
    display: flex; flex-direction: column; justify-content: end;
    h2, p {
        margin: 8px 0;
    }
    h2 {
        font-size: 1.1em;
    }
    p {
        font-size: 0.9em;
        font-weight: 800;
        color: #aaa;
    }
    .button {
        width: fit-content;
        border-radius: 100px;
        padding: 8px 36px;
        margin-top: 12px;
        background: #fff2;
        box-shadow: 
        0 0 0 1px #fff3, 
        inset 120px 0 100px -100px #000c, 
        0 0 0 0 #fff1;

        transition: box-shadow 0.4s ease-in-out;
        cursor: pointer;
        &:hover {
            box-shadow: 
            0 0 0 1px #fff3, 
            inset 200px 0px 100px -100px #000a, 
            -4px 0 8px 2px #fff2;
        }
    }
    img {
        position: absolute;
        top: 32px;
        left: 0; right: 0;
        width: 80%;
        margin: auto;
        object-fit: contain;
        user-select: none;
        pointer-events: none;
    }
}
.accents {
    user-select: none;
    pointer-events: none;
    position: absolute;
    left: 0; right: 0;
    t.........完整代码请登录后点击上方下载按钮下载查看