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-71.5L354.5,131.2z"/>
          <g id="codes">
            <path id="coding-lines-big" class="bst13" d="M273,141.6l-34,0.7 M239,148.3l42.5-0.7 M252.8,154.3l42.5-0.7 M309.2,159.6l-42.5,0.7 M295.3,165.6l-42.5,0.7 M280.1,171.6l-42.5,0.7 M269.8,177.8l-32.7,0 M280.1,183.7l-43.6,0.5 M291,189.9l-42.3,0.1M262.5,196.1l42.3-0.3 M279.2,202l-16.5,0"/>
            <path id="coding-lines-min" class="bst14" d="M344.3,133.4l-7.8,0.2 M336.6,135l9.7-0.2 M339.7,136.3l9.7-0.2 M352.6,137.6l-9.7,0.2 M349.4,138.9l-9.7,0.2 M346,140.3l-9.7,0.2 M343.6,141.7l-7.5,0 M346,143.1l-10,0.1 M348.4,144.5l-9.7,0M341.9,145.9l9.7-0.1 M345.7,147.3l-3.8,0"/>
          </g>
          <path id="blue-symbol-topleft" class="bst15" d="M176.4,124.2c-0.1-0.9-1.8-1.6-2.8-1.6c-0.9,0.1-2.6,0.8-2.6,1.8c0.1,0.9,1.8,1.6,2.8,1.6C174.7,125.9,176.4,125.1,176.4,124.2z"/>
			  </g>
        <g id="group-second-hologram-screens-carrier">
          <g id="3rd-screen">
            <path id="3rd-shadow" class="ast18" d="M327,230.7l-105.1,7.4l17.1-114c0.2-1.4,1.1-2.5,2.4-3.1L351,75.7L327,230.7z"/>
            <path id="main-frame3" class="st19" d="M320.9,224.7l-138.8,9.7l16.6-110.3l0,0l147.3-61L320.9,224.7z"/>
            <path id="top-bar3" class="st20" d="M344.5,72.6L197.8,130l0.9-5.9v0l147.3-61L344.5,72.6z"/>
            <g id="boxes-3">
              <path id="box-middle-3" class="st21" d="M319.1,191.8l-126.6,14.5l7.3-53.3L331.4,108L319.1,191.8z"/>
              <path id="box-top-3" class="st22" d="M332,101.2l-49.3,17l2.2-16.2L335,82.1L332,101.2z"/>
              <path id="box-bottom-3" class="st22" d="M315.2,218.4l-63.5,5.1l2.7-20.2l64.2-7.1L315.2,218.4z"/>
            </g>
          </g>
          <g id="2nd-screen">
            <path id="2nd-shadow" class="ast18" d="M337.9,83l-22.4,144.9l-93.4,6.5l16.6-110.3l0,0L337.9,83z"/>
            <path id="main-frame2" class="st19" d="M311.9,224.7L173,234.4l16.6-110.3l0,0l147.3-61L311.9,224.7z"/>
            <path id="top-bar2" class="st20" d="M335.4,72.6L188.8,130l0.9-5.9l0,0l147.3-61L335.4,72.6z"/>
            <g id="boxes-2">
              <path id="box-top-2" class="st22" d="M324,93.7l-131.2,45.6l0.8-4.7L326,82.1L324,93.7z"/>
              <path id="box-bottom-2" class="st22" d="M306.2,218.4l-126.4,10.3l2.9-18.4l126.9-13.9L306.2,218.4z"/>
              <path id="box-middle-2" class="st21" d="M192.3,144.7l130.8-43.8l-12.7,89.2l-127.8,16.2L192.3,144.7z"/>
            </g>
          </g>
          <g id="1st-screen">
            <path id="1st-shadow" class="ast18" d="M331.6,81.9L309,227.7l-95.9,6.7l16.6-110.3l0,0L331.6,81.9z"/>
            <path id="main-frame1" class="st19" d="M302.8,224.7L164,234.4l16.6-110.3l0,0l147.3-61L302.8,224.7z"/>
            <path id="top-bar1" class="st20" d="M326.4,72.6L179.7,130l0.9-5.9v0l147.3-61L326.4,72.6z"/>
            <g id="boxes-1">
              <path id="box-middle-1" class="st21" d="M301,191.8l-126.6,14.5l7.3-53.3L313.4,108L301,191.8z"/>
              <path id="box-top-1" class="st22" d="M313.9,101.2l-131.3,45.3l2-11.9L317,82.1L313.9,101.2z"/>
              <path id="box-bottom-1" class="st22" d="M297.2,218.4l-126.4,9.8l2.9-18l126.9-13.9L297.2,218.4z"/>
            </g>
            <g id="dots-colored">
              <path id="dot-red" class="st23" d="M184.3,126.1c-0.1,0.8-0.8,1.4-1.5,1.3c-0.7-0.1-1.2-0.8-1.1-1.6c0.1-0.8,0.8-1.4,1.5-1.3C183.9,124.5,184.4,125.3,184.3,126.1z"/>
              <path id="dot-yellow" class="st24" d="M188.3,124.4c-0.1,0.8-0.8,1.4-1.5,1.3c-0.7-0.1-1.2-0.8-1.1-1.6c0.1-0.8,0.8-1.4,1.5-1.3C188,122.9,188.5,123.6,188.3,124.4z"/>
              <path id="dot-green" class="st25" d="M192.3,123c-0.1,0.8-0.8,1.4-1.5,1.3c-0.7-0.1-1.2-0.8-1.1-1.6c0.1-0.8,0.8-1.4,1.5-1.3C192,121.5,192.4,122.2,192.3,123z"/>
            </g>
          </g>
        </g>
        
       </g>
    </svg>
  </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script >
/**
*----------------------------
*
* https://majordigital.se
*
*----------------------------
**/
var iconCarrier_development = document.getElementById("icon-carrier-development");
var bgCircle_1 = document.getElementById("bg-circle-1");

var firstscreen_grp = document.getElementById("1st-screen");
var secondscreen_grp = document.getElementById("2nd-screen");
var thirdscreen_grp = document.getElementById("3rd-screen");


/*var tl = new TimelineMax();*/

TweenLite.set([firstscreen_grp], { xPercent: 20, yPercent: 20, autoAlpha: 0, scale: 0.8 });
TweenLite.set([secondscreen_grp], { xPercent: 20, yPercent: 20, autoAlpha: 0, scale: 0.8 });
TweenLite.set([thirdscreen_grp], { xPercent: 20, yPercent: 20, autoAlpha: 0, scale: 0.8 });


function myOverFunction() {

  TweenLite.to([firstscreen_grp], 0.45, { xPercent: -60, yPercent: 0, autoAlpha: 0.5, scale: 1 });
  TweenLite.to([secondscreen_grp], 0.75, { xPercent: -40, yPercent: 0, autoAlpha: 0.5, scale: 1 });
  TweenLite.to([thirdscreen_grp], 0.95, { xPercent: -20, yPercent: 0, autoAlpha: 0.5, scale: 1 });

  TweenLite.to([bgCircle_1], 0.75, { yPercent: 10, xPercent: 35, scale: .85, fill: "#dedede", stroke: "#dedede", ease: Expo.easeOut });
  /*grp-first-state-screen*/
  TweenLite.to("path#mainscreen-display-first", 1, {
    attr: {
      d: "M346,65.6l-139.3,57.7c-1.2,0.5-2,1.6-2.2,2.8l-16.3,108.3l138.8-9.7l24-155.1C351.5,66.7,348.6,64.5,346,65.6z" },

    ease: Expo.easeOut });

  TweenLite.to("path#mainscreen-hw-upper-first", 1, {
    attr: {
      d: "M352.3,58.6l-150.9,62.5c-1.3,0.5-2.2,1.7-2.4,3.1l-17.6,117.2l150.3-10.5l26-168C358.2,59.8,355.2,57.4,352.3,58.6z" },

    fill: "#ff8800",
    ease: Expo.easeOut });

  TweenLite.to("path#onoff-btn-first", 1, {
    attr: {
      d: "M251.3,253.5c-1.1,3.6-3.9,5-6.3,3c-2.4-2-3.4-6.6-2.3-10.3c1.1-3.7,4-5,6.3-3C251.4,245.2,252.4,249.8,251.3,253.5z" },

    ease: Expo.easeOut });

  TweenLite.to("path#mainscreen-hw-lower-first", 1, {
    attr: {
      d: "M358.3,79.8l-180.8,39.6c-2.4,0.5-3.8,2.3-4,4.3l-8.8,134.1c-0.2,2.3,2.6,4.6,5.7,4.7l163.2,8.3c5.4,0.3,9.8-2.7,10.3-7l21-178.9C365.2,82.1,361.5,79.1,358.3,79.8z",
      d: "M352.4,59.2l-150.1,61.1c-1.9,0.8-3.1,2.6-3.5,4.6l-20.4,134c-0.4,2.4,1.5,4.6,4,4.6l136.7-0.6c4.9,0,9-3.6,9.8-8.4l29.1-191C358.2,60.5,355.2,58.1,352.4,59.2z" },

    ease: Expo.easeOut });

  TweenLite.to("path#mainscreen-depth-first", 1, {
    attr: {
      d: "M355.3,58.6l-148.6,64.6c-1.3,0.5-2.2,1.7-2.4,3.1l-24.6,134.4c0,1.1,2.4,4.1,4.8,4.1l139.2,0.4c4.6-0.1,9-4.7,9.7-8.4l29.7-190.4c0.2-0.9,0-1.5-0.4-2C360.9,61.3,356.9,59.3,355.3,58.6z" },

    ease: Expo.easeOut });

  /*mainscreen-display-content*/
  TweenLite.to("path#box-top", 1, {
    attr: {
      d: "M208.6,126.3l132.8-53.7l-3.8,21.8l-131.1,47L208.6,126.3z" },

    ease: Expo.easeOut });

  TweenLite.to("path#box-right-bottom", 1, {
    attr: {
      d: "M322.5,192l-4,25.7l-126.1,11.5l2.4-15.6L322.5,192z" },

    ease: Expo.easeOut });

  TweenLite.to("path#box-left-middle", 1, {
    attr: {
      d: "M195.6,209.2l10.1-63.2l39.1-13.3l-11,70L195.6,209.2z" },

    ease: Expo.easeOut });

  TweenLite.to("path#box-right-middle", 1, {
    attr: {
      d: "M335.6,101l-13.1,85.8l-86,15l11-69.5L335.6,101z" },

    ease: Expo.easeOut });

  TweenLite.to("path#blue-symbol-topleft", 1, {
    attr: {
      d: "M212.9,129.7c0.1-0.8-0.8-1.1-1.4-0.9c-0.5,0.2-1.5,1.2-1.6,2c-0.1,0.8,0.8,1.1,1.3,0.9C211.8,131.5,211.8,130.5,211.9,129.7z" },

    ease: Expo.easeOut });

  /* CODES */
  TweenLite.to("path#coding-lines-big", 1, {
    attr: {
      d: "M272,130.8l-22.2,6.9 M249.2,143.5l28-8.3 M257.2,147l28.9-8.2 M295.4,142.4l-29.8,8.2 M284.7,151.1l-28.8,7.7 M273.4,159.7l-27.9,7.1 M265.6,167.5l-21.1,4.7 M271.9,171.9l-28.5,6.5 M278.7,176.7l-28.3,5.8 M258.6,186.8l29.2-5.9 M269.1,190.7l-11.1,2" },

    ease: Expo.easeOut });

  TweenLite.to("path#coding-lines-min", 1, {
    attr: {
      d: "M327.6,105.8l-6.4,2.1 M321.1,109.3l8-2.5 M323.5,110.1l8.1-2.5 M334.1,108.3l-8.2,2.5 M331.3,110.6l-8.1,2.5 M328.2,112.9l-8,2.4 M326,115l-6.1,1.7 M327.9,116l-8.2,2.4 M329.7,117l-8,2.2 M324.2,120l8.1-2.3 M327.2,120.6l-3.1,0.9" },

    ease: Expo.easeOut });

  /*grp-firs.........完整代码请登录后点击上方下载按钮下载查看