css实现立体火柴盒子悬浮抽出火柴动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现立体火柴盒子悬浮抽出火柴动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=BenchNine:700&display=swap");
    
    :root {
    	--color-outline: #302322;
    	--color-background: #fdf7ea;
    	--color-match: #b34a37;
    	--size-border: 8px;
    	--size-height: 300px;
    	--size-width: 200px;
    	--size-depth: 100px;
    }
    
    * {
    	box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    	transition: all 0.3s ease;
    }
    
    *:before,
    *:after {
    	content: "";
    	position: absolute;
    }
    
    body {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 100vh;
    	width: 100%;
    	background: var(--color-background);
    	font-family: "BenchNine", sans-serif;
    }
    
    .container {
    	width: 500px;
    	height: 500px;
    	position: relative;
    	perspective: 1200px;
    	padding-left: 80px;
    	padding-top: 180px;
    }
    
    .box {
    	width: var(--size-height);
    	height: var(--size-width);
    	position: absolute;
    	transform-style: preserve-3d;
    	transition: transform 0.5s;
    	transform: rotate(-50deg) rotateX(30deg) translateZ(10px);
    	cursor: pointer;
    	transform-origin: center center;
    }
    
    .box > div {
    	position: absolute;
    	text-align: center;
    }
    
    .box .front,
    .box .back {
    	width: var(--size-height);
    	height: var(--size-width);
    }
    
    .box .right,
    .box .left {
    	width: var(--size-depth);
    	height: var(--size-width);
    }
    
    .box .top,
    .box .bottom {
    	width: var(--size-height);
    	height: var(--size-depth);
    }
    
    .box .right,
    .box .left {
    	left: var(--size-depth);
    }
    
    .box .top,
    .box .bottom {
    	top: calc(var(--size-depth) / 2);
    }
    
    .box .front,
    .box .back {
    	background: var(--color-background);
    	border: var(--size-border) solid var(--color-outline);
    	border-bottom-width: calc(var(--size-border) / 2);
    }
    
    .box .right,
    .box .left,
    .box .top,
    .box .bottom {
    	background: var(--color-background);
    	border: var(--size-border) solid var(--color-outline);
    	border-bottom-width: calc(var(--size-border) * 2);
    }
    
    .box .front {
    	transform: translateZ(50px);
    }
    
    .box .back {
    	transform: rotateX(-180deg) translateZ(50px);
    }
    
    .box .right {
    	transform: rotateY(90deg) translateZ(150px);
    }
    
    .box .left {
    	transform: rotateY(-90deg) translateZ(150px);
    	background: var(--color-outline);
    }
    
    .box .top {
    	transform: rotateX(90deg) translateZ(100px);
    }
    
    .box .bottom {
    	transform: rotateX(-90deg) translateZ(100px);
    	overflow: hidden;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    
    .box.outside .bottom:before {
    	background-image: radial-gradient(var(--color-outline) 20%, transparent 20%),
    		radial-gradient(var(--color-outline) 20%, transparent 20%);
    	background-position: 0 0, 8px 8px;
    	background-size: 16px 16px;
    	width: calc(100% - 20px);
    	height: calc(100% - 22px);
    }
    
    .box.outside .front {
    	z-index: 1000;
    }
    
    .box.outside .front:before {
    	left: 0;
    	top: 0;
    	width: 55px;
    	height: 55px;
    	background: var(--color-outline);
    	-webkit-mask-image: radial-gradient(
    		circle 10px at 100% 100%,
    		transparent 0,
    		transparent 55px,
    		var(--color-outline) 0px
    	);
    }
    
    .box.outside .front:after {
    	content: "set \A shit on \A fire";
    	white-space: pre;
    	
    	font-size: 16px;
    	line-height: 20px;
    	letter-spacing: 0.5px;
    	color: var(--color-outline);
    	text-transform: uppercase;
    	transform: rotate(90deg);
    	transform-origin: center center;
    	background: var(--color-background);
    	width: 70px;
    	height: 84px;
    	border-radius: 50%;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	left: calc(50% - 35px);
    	top: calc(50% - 42px);
    }
    
    .box.outside .front .line:nth-child(1),
    .box.outside .front .line:nth-child(2) {
    	position: absolute;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    
    .box.outside .front .line:nth-child(1) {
    	width: 154px;
    	height: 120px;
    	left: calc(50% - 77px);
    	top: calc(50% - 60px);
    }
    
    .box.outside .front .line:nth-child(1):before {
    	width: 4px;
    	height: 140px;
    	border-radius: 4px;
    	background: linear-gradient(
    		to top,
    		var(--color-outline),
    		var(--color-outline) 10px,
    		transparent 10px,
    		transparent 16px,
    		var(--color-outline) 16px,
    		var(--color-outline) 124px,
    		transparent 124px,
    		transparent 130px,
    		var(--color-outline) 130px,
    		var(--color-outline) 140px
    	);
    }
    
    .box.outside .front .line:nth-child(1):after {
    	height: 4px;
    	width: 174px;
    	background-color: var(--color-outline);
    	border-radius: 4px;
    	background: linear-gradient(
    		to right,
    		var(--color-outline),
    		var(--color-outline) 10px,
    		transparent 10px,
    		transparent 16px,
    		var(--color-outline) 16px,
    		var(--color-outline) 158px,
    		transparent 158px,
    		transparent 164px,
    		var(--color-outline) 164px,
    		var(--color-outline) 174px
    	);
    }
    
    .box.outside .front .line:nth-child(2) {
    	width: 116px;
    	height: 106px;
    	left: calc(50% - 58px);
    	top: calc(50% - 53px);
    	border-radius: 50%;
    }
    
    .box.outside .front .line:nth-child(2):before,
    .box.outside .front .line:nth-child(2):after {
    	width: 4px;
    	height: 140px;
    	border-radius: 4px;
    	background: linear-gradient(
    		to top,
    		var(--color-outline),
    		var(--color-outline) 14px,
    		transparent 14px,
    		transparent 22px,
    		var(--color-outline) 22px,
    		var(--color-outline) 118px,
    		transparent 118px,
    		transparent 126px,
    		var(--color-outline) 126px,
    		var(--color-outline) 140px
    	);
    }
    
    .box.outside .front .line:nth-child(2):before {
    	transform: rotate(-45deg);
    }
    
    .box.outside .front .line:nth-child(2):after {
    	transform: rotate(45deg);
    }
    
    .box.outside .front .line:nth-child(3),
    .box.outside .front .line:nth-child(4) {
    	position: absolute;
    	width: 116px;
    	height: 106px;
    	left: calc(50% - 58px);
    	top: calc(50% - 53px);
    	border-radius: 50%;
    	display: flex;
    	jus.........完整代码请登录后点击上方下载按钮下载查看