css打开三维盒子立体动画效果代码-html代码-BFW代码库

css打开三维盒子立体动画效果代码

代码语言：html

所属分类：动画

代码描述：css打开三维盒子立体动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>
<style>
    html,body {
	height:100%;
}
body {
	margin:0;
	overflow:hidden;
	background:radial-gradient(circle,#444857,#2d303a);
	color:#b8bbc8;
	font-family:'Lato','Lucida Grande','Lucida Sans Unicode',Tahoma,Sans-Serif;
	font-weight:400;
	font-size:15px;
}
.container {
	position:absolute;
	top:50%;
	left:50%;
	font-size:40px;
	transform-style:preserve-3d;
}
.fox {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	transform:rotateX(-35deg) rotateY(-45deg) scale3d(0.3,0.3,0.3);
	animation:fox 6.6s infinite ease-in-out both;
}
.fox .rot {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	animation:rot 6.6s infinite both;
}
.fox .side {
	position:absolute;
	top:50%;
	left:50%;
	width:2em;
	height:2.5em;
	margin:-1.25em 0 0 -1em;
	background:#f68b1f;
	overflow:hidden;
}
.fox .side:nth-child(2n) {
	background:#f15a22;
}
.fox .side:nth-child(1)::before,.fox .side:nth-child(2)::before {
	content:'';
	position:absolute;
	display:block;
	top:54%;
	left:61%;
	width:.35em;
	height:.35em;
	margin:-.175em 0 0 -.175em;
	transform:skewX(-20deg) scaleY(1.2);
	border-radius:50%;
	background:#fff;
	filter:drop-shadow(0 0 0.05em rgba(0,0,0,0.1));
	animation:eyes 6.6s infinite both,eyeL 6.6s infinite both;
}
.fox .side:nth-child(1)::after,.fox .side:nth-child(2)::.........完整代码请登录后点击上方下载按钮下载查看