三维n95口罩展示及参数修改效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：三维n95口罩展示及参数修改效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/* 
 Best viewed in Full mode (Tested on Chrome and FireFox)
 CSS Only 3D KN95-Face Mask with 3D Camera Simulation.
 This 3D object created and processed using CSS and
 powered by a few lines of JavaScript.
 */

html, body{
padding:0;
margin:0;
background-color:white;
font-family:"Arial", sans-serif;
font-size:10px;
width:100vw;
height:100vh;
display:block;
scrollbar-color:rgb(0,100,200) rgb(20,25,30);
scrollbar-width:thin;
}

body::before{
content:"";
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:radial-gradient(#FFF, #000);
background-size:100vw 100vh;
display:block;
opacity:0.4;
}

/* enhancements */
.noscroll{
overflow:hidden;
}

.noanimations .uniform,
.noanimations .object3d,
.noanimations .extension,
.noanimations #controls{
transition:none;
transition-property:none;
transition-duration:0s;
transition-timing-function:linear;
}

.noantialiasing [t3d],
.noantialiasing [pr-ant] div{
box-shadow:none;
}

.controls-hidden .uniform{
left:calc(var(--ptx, 156px) - 156px);
}

/* maximum space to scale the scene uniformly */
.uniform{
position:absolute;
left:var(--ptx, 156px); /* sidebar width */
top:var(--pty, 0px); /*45,10*/
width:100vw;height:100vh;
transform:scale(var(--s,1));
display:flex;
align-items:center;
overflow:visible;
transition:transform ease 1s;
transition-property:transform, left, top; /* bad idea! */
will-change:transform, left, top; /* render optimization */
}

/* represent the object in 3D space */
.object3d{
top:0px;
position:relative;
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--z, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
--path-max-rotate:calc(360deg + var(--z, 0deg));
transform-style:preserve-3d;
margin:auto;
transition:transform ease 1s; /* don't animate top, done! */
will-change:transform; /* render optimization */
}

.object3d.rotate{
animation:autorotate linear var(--rs, 2s) forwards infinite;
}

@keyframes autorotate{
100%{
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--path-max-rotate)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
}
}

/* anti-aliasing */
[ant]{
box-shadow:0 0 0 1px rgba(0,0,0,0);
}

[pr-ant] div{
box-shadow:0 0 0 1px rgba(0,0,0,0);
}

/* parent 3D */
[t3d]{
transform-style:preserve-3d;
}

[t3dc], [t3dc] div{
transform-style:preserve-3d;
}

/* children 3D */
[t3dp]::before, [t3dp]::after{
transform-style:preserve-3d;
}

/* child 3D */
[t3db]::before{transform-style:preserve-3d;}
[t3da]::after{transform-style:preserve-3d;}

/* Default Variables for easy access */
.default-variables{
--grinding-ratio: 35%;
--angle-of-base: 41deg;
--angle-of-cone: 49.4deg; /*60.4deg*/
--angle-of-cone-b: 49.4deg;
--angle-of-strip:2deg;
--angle-of-low:35deg;

/* position, size */
--strip-x:8px;
--strip-y:16px;
--mz: 254px;
--oval-shift: -17px;
--oval-radius:350px;
--angle-height-1: 160px; /*14px*/
--angle-height-2: 160px;
--base-width: 240px;
--base-height: 190px;

/* L.H.S */
--color-triangle-top-1: #fff;
--color-triangle-bottom-1: #f6f6f6;
--color-base-left-1: #fff;
--shade-cones-top: rgba(0,0,0,0.15);

/* R.H.S */
--color-triangle-top-2: #e0e0e0;
--color-triangle-bottom-2: #d3d3d3;
--color-base-right-1: #dbdbdb;
--shade-cones-bottom: rgba(0,0,0,0);

/* BOTH */
--shade-cage: rgba(0,0,0,0.1);
}

/* Main */
.main-stage{
position:relative;
top:0;
left:0;
width:246px; /* it's kinda shadow size ;) */
height:305px;
}

.main-stage::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.16);
filter:blur(40px);
border-radius:40%;
backface-visibility:hidden;
}

.main-rect{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) translateZ(var(--mz)) rotateX(-90deg);
width:var(--base-width);
height:var(--base-height);
}

.main-rect::before, .main-rect::after{
content:"";
position:absolute;
left:2px;
top:0;
width:11px;
height:100%;
background-color:#bbb;
background-image:linear-gradient(0deg, rgba(255,255,255,0.7) 2px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,0.13) 2px, transparent 1px);
background-size:2px 2px, 1px 4px;
background-position:6px 0, 0 0;
background-repeat:repeat-y, repeat;
transform:translateX(-100%);
/*clip-path: polygon(5% 5%, 100% 0, 100% 100%, 5% 95%);*/
border-radius:20px 0px 0px 20px;
backface-visibility:hidden;
border:1.5px solid rgba(0,0,0,0.1);
box-sizing:border-box;
box-shadow:0 0 0 2px rgba(0,0,0,0);
}

.main-rect::after{
background-color:#d5d5d5;
background-image:linear-gradient(0deg, rgba(255,255,255,0.7) 2px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.4) 2px, transparent 1px);
transform:translateX(-100%) rotateX(-180deg);
}

.main-rect .mass{
position:absolute;
left:0;
top:0;
width:76%;
height:100%;
}

.main-rect .oval-gen{
position: absolute;
left:75%;
top: 0;
width:49%;
height:100%;
overflow:hidden;
}

.main-rect .oval{
position: absolute;
left:0;
top: 50%;
width:100%;
height:129%;
border-radius: 0px var(--oval-radius) var(--oval-radius) 0;
transform:translate(var(--oval-shift), -50%);
overflow:hidden;
}

/*
.main-rect .oval-gen {
    position: absolute;
    left: 75%;
    top: 0;
    width: 52%;
    height: 100%;
    overflow: hidden;
    border-radius: 0%;
}
.main-rect .oval {
    position: absolute;
    left: 0;
    top: 49%;
    width: 199%;
    height: 129%;
    border-radius: 39% 61% 68% 32% / 56% 61% 39% 44%;
    transform: translate(-131px, -50%) rotate(-23deg);
    overflow: hidden;
}
*/

.main-rect .side{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
transform:rotateY(var(--a));
transform-origin:0% 50%;
}

.main-rect .side-left{
--a:var(--angle-of-base);
}

.main-rect .side-right{
--a:calc(var(--angle-of-base) * -1);
}

.side .over-top{
top:0;
height:var(--angle-height-1);
transform:translateY(-100%) rotateX(var(--node));
transform-origin:0% 100%;
}

.side .over-bottom{
bottom:0;
height:var(--angle-height-2);
transform:translateY(100%) rotateX(var(--node));
transform-origin:0% 0%;
}

.side .over-top,
.side .over-bottom{
position:absolute;
left:0;
width:100%;
}

.side-left .over-top{
--node:calc(var(--angle-of-cone) * -1);
}

.side-right .over-top{
--node:var(--angle-of-cone);
}

.side-right .over-bottom{
--node:calc(var(--angle-of-cone-b) * -1);
}

.side-left .over-bottom{
--node:var(--angle-of-cone-b);
}

.cone1, .cone2{
position:absolute;
left:0;
width:var(--grinding-ratio);
height:60%;
background:var(--color-triangle-top-1);
}

.side-left .cone1,
.side-left .cone2{
background:var(--color-triangle-bottom-1);
}

.cone1{
bottom:0;
clip-path:polygon(100% 0, 0 100%, 100% 100%);
}

.cone2{
top:0;
clip-path:polygon(100% 0%, 0% 0%, 100% 100%);
}

.cone1-finish,
.cone2-finish{
position:absolute;
left:var(--grinding-ratio);
width:calc(100% - var(--grinding-ratio));
height:60%;
background:var(--color-triangle-top-1);
}

.side-left .cone1-finish,
.side-left .cone2-finish{
background:var(--color-triangle-bottom-1);
}

.cone1-finish{
bottom:0;
clip-path:polygon(0% 0, 0 100%, 100% 100%);
}

.cone2-finish{
top:0;
clip-path:polygon(100% 0%, 0% 0, 0% 100%);
}

.cones.cc{
display:block;
backface-visibility:hidden;
transform:translateZ(0px);
}

.side-right .cones.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

.side-right .mass.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

.oval-gen.cc{
transform:translateZ(1px);
backface-visibility:hidden;
}

.side-right .oval-gen.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

/* colors */
.side-left .over-top .cones{background-color:var(--color-triangle-top-1)}
.side-right .over-top .cones{background-color:var(--color-triangle-top-2)}

.side-left .over-bottom .cones{background-color:var(--color-triangle-bottom-1)}
.side-right .over-bottom .cones{background-color:var(--color-triangle-bottom-2)}

.main-rect .oval,
.main-rect .mass{
background-color:var(--color-base-left-1);
}
.main-rect .side-right .oval,
.main-rect .side-right .mass{
background-color:var(--color-base-right-1);
}

/* apply thread effect */
.side-left .over-top .cones,
.side-left .over-bottom .cones,
.side-right .over-top .cones,
.side-right .over-bottom .cones,
.main-rect .oval,
.main-rect .mass{
background-image:linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 1px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

/* apply clone shades */
.side-right .over-top .cones.cc,
.side-left .over-top .cones.cc{
background-image:linear-gradient(var(--shade-cones-top), var(--shade-cones-top)), linear-gradient(90deg, rgba(0,0,0,0.02) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.side-right .over-bottom .cones.cc,
.side-left .over-bottom .cones.cc{
background-image:linear-gradient(var(--shade-cones-bottom), var(--shade-cones-bottom)), linear-gradient(90deg, rgba(0,0,0,0.02) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.oval-gen.cc .oval,
.mass.cc{
background-image:linear-gradient(var(--shade-cage), var(--shade-cage)), linear-gradient(90deg, rgba(0,0,0,0.014) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.mass.cc{
backface-visibility:hidden;
}

/* strip */
.strip{
background-image:linear-gradient(90deg, rgba(0,0,0,0.12) 10px, transparent 6px), linear-gradient(90deg, rgba(255,255,255,0.56) 10px, transparent 0%);
background-repeat:repeat-x;
background-size:16px 5px;
background-position:0 0, 0 5px;
}

.cc .strip{
background-image:linear-gradient(90deg, rgba(255,255,255,0.4) 10px, transparent 6px), linear-gradient(90deg, rgba(0,0,0,0.16) 10px, transparent 0%);
}

.strip1{
position:absolute;
left:var(--strip-x);
top:var(--strip-y);
width:94%;
height:6px;
transform:rotate(var(--angle-of-strip));
}

.strip2{
position:absolute;
left:var(--strip-x);
bottom:var(--strip-y);
width:79%;
height:6px;
transform:rotate(calc(var(--angle-of-strip) * -1));
}

/*
.oval::before{
content: "";
position: absolute;
left: -122px;
top: 1px;
width: 194%;
height: 100%;
border-radius: 50%;
border: 2.5px dashed rgba(0,0,0,0.2);
transform: rotate(17deg);
}
*/

/* This might be the best hack for curved borders :D */
.oval::before{
content: "";
position: absolute;
left: -122px;
top: 3px;
width: 194%;
height: 98%;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(0,0,0,0.2)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 50%;
}

.side-right .cc .oval::before{
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(255,255,255,0.4)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
}

.over-top .cone1-finish::before,
.over-bottom .cone2-finish::before{
content: "";
position: absolute;
background-image: linear-gradient(90deg, rgba(0,0,0,0.17) 8px, transparent 6px);
background-repeat: repeat-x;
background-size: 16px 5px;
background-position: 0px 0;
right: 10px;
top: 50%;
width: 100%;
height: 4px;
}

.over-top .cone1-finish::before{
transform: translateY(3px) rotate(31deg);
}

.over-bottom .cone2-finish::before{
transform: translateY(-6px) rotate(-31deg);
}

.side-right .over-top .cc.cone1-finish::before,
.side-right .over-bottom .cc.cone2-finish::before{
background-image: linear-gradient(90deg, rgba(255,255,255,0.4) 8px, transparent 6px);
}

/* conic outlines */

.over-top .cone1::before{
content: "";
position: absolute;
left: -3px;
top: -2px;
width: 100%;
height: 100%;
background-image: linear-gradient(132deg, #aaa 68px, transparent 56px);
}

.over-bottom .cone2::before{
content: "";
position: absolute;
left: 75px;
bottom: -38px;
width: 2px;
height: 101%;
background: rgba(0,0,0,0.22);
transform: rotate(-42deg) translateY(-62px);
}

/* handles */
.low-cone{
position: absolute;
left: 50px;
bottom: 38px;
width: 37%;
height: 10px;
background: #585050;
border-radius: 0px 10px 10px 0px;
opacity:0.6;
}

.low-cone::before{
content: "";
position: absolute;
left: 54%;
top: 50%;
width: calc(100% + 1px);
height: calc(100% + 14px);
border: 2px dotted #aaa;
transform: translate(-50%,-50%);
box-sizing: border-box;
border-left: 0;
display: block;
}

.side-left .low-cone{transform:translateZ(-1px) rotate(var(--angle-of-low));background:#666565}
.side-right .low-cone{transform:translateZ(1px) rotate(var(--angle-of-low))}


/* hands */
.rig, .rig-s{
position: absolute;
right: 43px;
top: 50%;
width: 145px;
height: 153px;
border: 7px solid #5767C7;
border-left-color: transparent;
border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
transform: translate(100%, -50%);
z-index: 0;
}

.side-left .rig{transform: translate3d(100%, -50%, 1px)}
.side-right .rig{transform: translate3d(100%, -50%, 0px)}

.rig-s{
border:0;
border-radius:0;
z-index:2;
right:32px;
}

.rig-s::before, .rig-s::after{
content:"";
position:absolute;
left:0;
width:14px;
height:14px;
background-color:#5767C7;
background-image:linear-gradient(-25deg, rgba(255,255,255,0.1) 25%, transparent 75%), linear-gradient(0deg, rgba(255,255,255,0.1) 75%, transparent 25%);
background-size:2px 6px, 2px 6px;
border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
box-shadow:0 0 0 2px rgba(0,0,0,0);
display:block;
opacity:0.5;
}

.rig-s::before{top:-4px}
.rig-s::after{
bottom:-4px;
border-radius:30% 70% 77% 23% / 77% 47% 53% 23%;
}

:root{
--controls-active:linear-gradient(0deg, rgba(0,100,200,0.4), rgba(0,100,200,0.4));
--controls-active-warn:linear-gradient(0deg, rgba(217,54,0,0.4), rgba(217,54,0,0.4));
}

/* controls */
#controls
{
position:fixed;
left:0px;
top:0px;
background-color:black;
display:block;
padding:4px 0;
color:white;
height:100%;
transition-property:transform;
transition-duration:0.64s;
transition-timing-function:cubic-bezier(.17,.84,.44,1);
box-shadow:4px 0 10px 0px rgba(0,0,0,0.2);
}

/* additional controls */
button.disabled{
opacity:0.4;
pointer-events:none;
}

button.board-borders::before{
content:"Hide ";
}
.noborders button.board-borders::before{
content:"Show ";
}

button.anim-boost::before{
.........完整代码请登录后点击上方下载按钮下载查看