TweenMax实现电脑显示器悬浮三维立体分层效果代码
代码语言：html
所属分类：悬停
代码描述：TweenMax实现电脑显示器悬浮三维立体分层效果代码
代码标签： 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>
&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0