css+svg实现一个包装盒纸盒效果代码-html代码-BFW代码库

css+svg实现一个包装盒纸盒效果代码

代码语言：html

代码描述：css+svg实现一个包装盒纸盒效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        :root {
        	--h: 226;
          --s: 100%;
          --size: clamp(14rem, -0.4000rem + 64.0000vw, 18rem);
        	
        	--tz: calc(var(--size) / 2);
          
          --shade-light: hsl(var(--h) var(--s) 96%);
          --shade-mid: hsl(var(--h) var(--s) 94%);
          --shade-dark: hsl(var(--h) var(--s) 92%);
        	
        	--text: #323232;
        }
        
        html { 
        	height: 100%;
        	font-family: 'Inter', sans-serif; 
        }
        
        @supports (font-variation-settings: normal) {
          html { 
        		font-family: 'Inter var', sans-serif; 
        	}
        }
        
        *, *::before, *::after {
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        }
        
        svg {
          max-height: 100%;
          pointer-events: none;   
        }
        
        body {
        	font-family: "Inter", sans-serif;
        	height: 100vh;
        	display: grid;
        	place-content: center;
        	background: hsl(var(--h), var(--s), 88%);
        	color: var(--text);
        }
        
        .b{
        	width: var(--size);
        	height: var(--size);
        	position: relative;
        	transform-style: preserve-3d;
        	transform: rotate3d(-.1, .2, -.035, 45deg);
        }
        
        
        .b--top, .b--right, .b--bottom, .b--left {
        	width: 100%;
        	height: 100%;
        	position: absolute;
        	backface-visibility: inherit;
        }
        
        
        .b--top {
        	background-color: var(--shade-light);
        	transform: rotateX(90deg) translateZ(var(--tz));
        }
        
        .b--right {
        	background-color: var(--shade-dark);
        	transform: translateZ(var(--tz));
        }
        
        .b--bottom {
        	transform: rotateX(-90deg) translateZ(var(--tz));
        	box-shadow: 6px -16px 25px 12px hsla(var(--h) var(--s) 36% / 25%);
        }
        
        .b--left {
        	background-color: var(--shade-mid);
        	transform: rotateY(-90deg) translateZ(var(--tz));
        }
        
        
        .b--right, .b--left {
        	height: 120%;
        }
        .b--bottom {
        	bottom: -20%;
        }
        
        /*--Labels--*/
        
        .label--top {
        	display: grid;
        	place-content: center;
        	height: 100%;
        	box-shadow: inset 0 -2rem 0 var(--shade-mid), 
        		inset 0 -4rem 0 -1px hsl(var(--h), var(--s), 60%);
        }
        
        .label--right, .label--left {
        	height: 100%;
        	padding-inline: 1rem;
        	padding-block: 2rem;
        }
        
        .label--right {
        	opacity: .8;
        }
        
        .label--left {
        	box-shadow: inset -2rem 0 0 var(--shade-mid), 
        		inset -4rem 0 0 -1px hsl(var(--h), var(--s), 60%);
        }
        
        h1 {
        	font-size: 2rem;
        	font-weight: 400;
        	line-height: 1;
        }
        
        h1 span {
        	display: block;
        	font-size: 4rem;
        	font-weight: 900;
        }
        
        h2 {
        	font-size: 1rem;
        }
        
        hr {
        	border: none;
        	height: 1px;
        	background-color: var(--text);
        	margin-block: .5rem;
        }
        
        ul {
        	list-style: none;
        	font-size: .875rem;
        	font-weight: 500;
        	line-height: 1.5;
        }
        
        p {
        	font-size: .75rem;
        	padding: .5rem;
        	margin-block-end: .5rem;
        	border: 1px solid var(--text);
        	border-radius: .5rem;
        }
        
        .dose, .icons {
        	font-size: 1.75rem;
        	display: block;
        	position: absolute;
        	bottom: 1rem;
        	right: 1rem;
        }
        
        .dose {
        	background-color: var(--shade-mid)
        }
        
        .icons {
        	display: flex;
        	gap: .5rem;
        	align-items: center;
        }
    </style>



</head>

<body>
    <div class="b">
        <div class="b--top">
            <div class="label--top">
                <svg vi.........完整代码请登录后点击上方下载按钮下载查看