TweenMax实现电脑显示器悬浮三维立体分层效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：TweenMax实现电脑显示器悬浮三维立体分层效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #f1f1f1;
  display: -webkit-flex;
  display: flex;
  font-family: "Bitter", serif;
}

.st0{fill:#e6e6e6;stroke:#e6e6e6;stroke-width:3;stroke-miterlimit:10;} /* bg-circle */
	.st1{opacity:0.3;fill:#415B67;}
	.st2{fill:#FFFFFF;}
	.st3{fill:#415B67;}
	.st4{fill:#97D1D5;}
	.st5{fill:#DDF1FC;}
	.st6{fill:#E21F26;}
	.st7{fill:#FDEC04;}
	.st8{fill:#CCD52A;}
	.st9{opacity:0.22;fill:#4C3059;}
	.st10{fill:#7D7387;}
	.st11{fill:#DAC5E0;} /* mainscreen-leg */
	.st12{fill:#96889E;} /* mainscreen-leg-shadow */
	.st13{fill:#4c4544;} /* mainscreen-depth */
	.st14{fill:#E9D2E6;} /* mainscreen-hw-lower */
	.st15{fill:#9C9D9D;} /* onoff-btn */
	.st16{fill:#695f5e;} /* main-screen-hw-upper */
	.st17{fill:#191919;} /* mainscreen-display */
  .st18 {fill:none;stroke:#F6C7AA;stroke-width:2;stroke-miterlimit:10;}

.ast18{opacity:0.3;fill:#415B67;}
	.st19{fill:#FFFFFF;}
	.st20{fill:#415B67;}
	.st21{fill:#97D1D5;}
	.st22{fill:#DDF1FC;}
	.st23{fill:#E21F26;}
	.st24{fill:#FDEC04;}
	.st25{fill:#CCD52A;}

/*Screen Display content*/
.bst9{fill:#3C3C3C;}
.bst10{fill:#252525;}
.bst11{fill:#383838;}
.bst12{fill:#1E1E1E;}
.bst13{fill:none;stroke:#F6C7AA;stroke-width:2;stroke-miterlimit:10;}
.bst14{fill:none;stroke:#F6C7AA;stroke-width:0.5;stroke-miterlimit:10;}
.bst15{fill:#3FA6DE;}

.icon-carrier {
  width: 400px;
  height: auto;
  margin: 20px auto;
}

.hologram-screens {
  display: block;
}

@media only screen and (max-width: 600px) {
    .icon-carrier {
        width: 200px;
    }
}
</style>



</head>

<body  >
  <div class="icon-carrier" id="icon-carrier-development" onmouseover="myOverFunction()" onmouseout="myOutFunction()">
    <svg viewBox="0 0 440 357.3" preserveAspectRatio="xMidYMid slice">
      <circle id="bg-circle-1" class="st0" cx="261.4" cy="185.8" r="122.6"/>
      <g id="group-first-state-screen">
        <g id="grp-first-state-leg"> 
          <path id="mainscreen-leg-first" class="st11" d="M292.2,257.6c0,0,9.6,2.1,11.3,23.6c0.5,7.1,1.2,11.3-1.2,13.4c-2.4,2.2-13.3,6.3-20.3,9.4c-3.8,1.7-5.8,2.1-15,1.3c-13.4-1.2-52-5.5-52-5.5s26.8-6.1,34.8-10.2c7.5-3.7,8.1-6.3,8.1-12c0-4.6-3.4-8.6-3.7-16L292.2,257.6z"/>
  
          <path id="mainscreen-leg-shadow-first" class="st12" d="M254.1,261.6c0.4,4,2,9.1,3.2,12c7.8-0.5,33.6,0.8,45.9,5.4c-0.8-12.6-6.6-20.8-6.6-20.8L254.1,261.6z"/>
        </g>
  
        <g id="grp-first-state-screen">
          <path id="mainscreen-depth-first" class="st13" d="M372.1,96.1l-205.3,16.2c-2.2,0.1-3.6,1.2-3.6,2.7l-15.5,146.3c0.2,1.2,5.3,4.8,9.7,5.1l201,11.4c5.5,0.3,10.1-3.6,10.4-6.8l9.8-167.1c0.1-0.8-0.2-1.4-0.7-2C375.4,98.5,374.2,97.3,372.1,96.1z"/>
  
          <path id="mainscreen-hw-lower-first" class="st14" d="M368.7,95.2l-210.6,12.6c-3.3,0.2-5.1,1.9-5.3,4l-6.6,147.2c-0.1,2.6,3.8,5.3,8.3,5.5l200.9,12c5.8,0.3,10.3-2.5,10.5-6.7l9.8-168.9C375.9,98.2,371.9,95,368.7,95.2z"/>
  
          <path id="onoff-btn-first" class="st15" d="M263.8,261.5c-1.5,3.8-5.5,5.3-8.8,3.2c-3.4-2.1-4.8-7-3.3-10.9c1.6-3.9,5.6-5.3,8.9-3.1C264,252.8,265.4,257.7,263.8,261.5z"/>
  
          <path id="mainscreen-hw-upper-first" class="st16" d="M368.7,95.2l-211.1,12.7c-2.7,0.2-4.5,1.9-4.7,3.9l-5.8,128.5l220,8.7l8.6-148C375.9,98.2,371.9,95,368.7,95.2z"/>
  
          <path id="mainscreen-display-first" class="st17" d="M361.1,101.8l-198.9,10.6c-2.5,0.2-3.9,1.5-3.9,3.3l-5.3,118.8l206.8,6.8l7.9-134.2C367.8,104.6,364.1,101.6,361.1,101.8z"/>
        </g>

        <g id="screen-content-boxes">
          <path id="box-top" class="bst9" d="M166.4,118l190-9.5l-1.1,17.2l-189.7,7.9L166.4,118z"/>
          <path id="box-right-bottom" class="bst10" d="M349.9,211.9l-1.4,22.6l-189-5.2l0.8-17L349.9,211.9z"/>
          <path id="box-left-middle" class="bst10" d="M161,207.5l4.1-69l65.5-2.3l-4.2,71.3L161,207.5z"/>
          <path id="box-right-middle" class="bst12" d="M354.5,131.2l-4.3,75.8l-119.2,0.6l4-7.........完整代码请登录后点击上方下载按钮下载查看