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

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

代码语言：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.8L.........完整代码请登录后点击上方下载按钮下载查看