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;
        }
        
 .........完整代码请登录后点击上方下载按钮下载查看