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)::after {
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:linear-gradient(to top left,#818284,#818284 33%,#67809b 50%,transparent 50%),linear-gradient(to bottom right,#fff,#fff 50%,transparent 50%);
        background-size:.3em .35em,.5em .5em;
        background-position:bottom right,.1em .1em;
        background-repeat:no-repeat;
        filter:drop-shadow(0.02em 0.02em 0.03em rgba(0,0,0,0.1));
        animation:earsNose 6.6s infinite both;
}
.fox .side:nth-child(1) {
        transform:rotateY(0deg) translateZ(1em);
        animation:front 6.6s infinite both;
}
.fox .side:nth-child(2) {
        transform:rotateY(90deg) translateZ(1em) scaleX(-1);
        background-image:linear-gradient(to bottom,rgba(138,91,53,0),rgba(138,91,53,0)),linear-gradient(to bottom,rgba(138,91,53,0),rgba(138,91,53,0));
        background-position:center top,center bottom;
        background-size:0.5em 0.5em,0.5em 0.25em;
        background-repeat:no-repeat;
        animation:right 6.6s infinite both;
}
.fox .side:nth-child(2)::before {
        animation:eyes 6.6s infinite both,eyeR 6.6s infinite both;
}
.fox .side:nth-child(3) {
        width:2em;
        height:2em;
        transform:translate(-50%,1.5em) rotateZ(-25deg) translate(50%,-1.5em) rotateX(90deg) translateZ(1em) translateX(-50%) rotateY(-145deg) translateX(50%);
        animation:tail2 6.6s infinite both;
}
.fox .side:nth-child(3)::before {
        content:'';
        position:absolute;
        top:50%;
        left:0;
        height:.5em;
        width:100%;
        margin-top:-.25em;
        background:#a37348;
        opacity:0;
        animation:tail2M2 6.6s infinite both;
}
.fox .side:nth-child(3)::after {
        content:'';
        position:absolu.........完整代码请登录后点击上方下载按钮下载查看