TweenMax实现熊猫发怒激光动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax实现熊猫发怒激光动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100vw;
height: 100vh;
background: #56caf5;
font-family: "Frijole", cursive;
}
.panda {
height: 325px;
margin: 10px auto;
display: table;
}
#lasers line {
visibility: hidden;
}
h2 {
font-family: "Frijole", cursive;
top: 140px;
left: 50%;
margin-left: -300px;
text-align: center;
color: #f7a398;
font-size: 45px;
position: absolute;
text-shadow: 0 1px 0 #e02f1f, 0 2px 0 #e7584b, 0 3px 0 #e02f1f, 0 4px 0 #ce2b1c, 0 5px 0 #c5291b, 0 6px 0 #bc271a, 0 7px 0 #b82619, 0 8px 0 #9d2115, 0 0 5px rgba(80, 25, 25, 0.05), 0 1px 3px rgba(80, 25, 25, 0.1), 0 3px 5px rgba(80, 25, 25, 0.1), 0 5px 10px rgba(80, 25, 25, 0.1), 0 10px 10px rgba(80, 25, 25, 0.1), 0 20px 20px rgba(80, 25, 25, 0.2);
}
</style>
</head>
<body translate="no" >
<svg class="panda" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 980.1 400" enable-background="new 0 0 980.1 400" xml:space="preserve">
<g id="shadow">
<ellipse opacity="0.1" fill="#3A6E91" cx="480.3" cy="374.5" rx="161.3" ry="17.9" />
<ellipse opacity="0.4" fill="#3A6E91" cx="480.3" cy="370.9" rx="97.5" ry="10.8" />
</g>
<g class="p-body">
<path id="leg2" d="M573.6 236.3c0 0-2.9 58.1-11.8 77.2 -9.3 19.8 8.3 44.5 0 54.4s-70.4 6.2-70.4 6.2 -7.7-11.9 0-54.4c7.4-41.1-4.9-42.1-4.9-42.1L573.6 236.3 573.6 236.3 573.6 236.3H571l0 0" />
<path id="leg1" d="M390 236.3c0 0 11.1 56.7 17.5 77.2 5.6 18-8.6 44.5 0 54.4 8.6 9.9 73.2 6.2 73.2 6.2s6.4-11.6 0-54.4c-6.6-43.9 5.1-42.1 5.1-42.1L390 236.3 390 236.3 390 236.3 390 236.3 390 236.3" />
<path id="arm2" d="M536 122.9c0 0 46.1 10.6 54.1 72.2s14.8 82.4-8.1 86.6c-22.8 4.2-33.2-58.3-33.2-58.3L536 122.9z" />
<path id="arm3" display="none" d="M239.5 134.4c0 0 50.1 60 53.8 31.7 6.8-52.7 34.7-49.1 34.7-34.5 0 0 18.9 100.3-47 87.8C281 219.5 172.7 195.9 239.5 134.4z" />
<path id="arm1" d="M425.9 125.5c0 0-43.2 11-50.7 74.8 -7.6 63.8-13.8 85.4 7.6 89.8 21.4 4.3 31.1-60.5 31.1-60.5L425.9 125.5z" />
<g id="body">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="430.2" y1="117" x2="536.7" y2="301.5">
<stop offset="0" stop-color="#FFFFFF" />
<stop offset="0.2" stop-color="#FCFCFC" />
<stop offset="0.4" stop-color="#F2F2F2" />
<stop offset="0.6" stop-color="#E1E1E1" />
<stop offset="0.7" stop-color="#C9C9C9" />
<stop offset="0.9" stop-color="#ABABAB" />
<stop offset="1" stop-color="#919191" />
</linearGradient>
<ellipse fill="url(#SVGID_1_)" cx="483.4" cy="209.2" rx="94.9" ry="110.1" />
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="483" y1="275.8" x2="483" y2="97.4">
<stop offset="0" stop-color="#FFFFFF" />
<stop offset="0.2" stop-color="#FCFCFC" />
<stop offset="0.3" stop-color="#F2F2F2" />
<stop offset="0.4" stop-color="#E1E1E1" />
<stop offset="0.6" stop-color="#C9C9C9" />
<stop offset="0.7" stop-color="#ABABAB" />
<stop offset="0.8" stop-color="#858585" />
<stop offset="0.9" stop-color="#5A5A5A" />
<stop offset="1" stop-color="#2E2E2E" />
</linearGradient>
<ellipse opacity="0.4" fill="url(#SVGID_2_)" cx="483" cy="186.6" rx="86" ry="89.2" />
<ellipse display="none" fill="#D3D3D3" cx="483.4" cy="205" rx="87.8" ry="101.9" />
<path opacity="0.9" fill="#FFFFFF" d="M545.1 159.7c-39.4 24-82.4 38-118.6-4.5 -18.2 19-22.4 60.7-17.9 85.1 5.1 27.7 31.1 43.5 59 47.7 52.4 7.9 101.3-28.6 93.5-83.2C562.6 210.5 559.7 176.6 545.1 159.7z" />
</g>
<g id="head">
<g id="face">
<path fill="#ABABAB" d="M415 99.9c10.8-31.2 33.1-85.7 71.5-88.6 34.9-2.7 61.1 49.8 67.6 76.9 3.7 15.4 3.4 34.3-1 49.4 -6.7 22.9-22.2 28.4-42.4 35.9 -24.6 9.1-44.6 11.2-67.2-6.4C423.4 151.4 407.5 126 415 99.9z" />
<path fill="#EAEAEA" d="M415 98.1c10.8-31.2 33.1-85.7 71.5-88.6 34.9-2.7 61.1 49.8 67.6 76.9 3.7 15.4 3.4 34.3-1 49.4 -6.7 22.9-22.2 28.4-42.4 35.9 -24.6 9.1-44.6 11.2-67.2-6.4C423.4 149.6 407.5 124.3 415 98.1z" />
<path fill="#FFFFFF" d="M418.9 93.4c10.2-29.4 31.2-80.8 67.4-83.6 32.9-2.5 57.6 46.9 63.7 72.5 3.5 14.5 3.2 32.4-0.9 46.6 -6.3 21.6-20.9 26.8-40 33.9 -23.2 8.6-42.1 10.6-63.4-6.1C426.8 142 411.9 118.1 418.9 93.4z" />
</g>
<g id="features">
<path d="M517.4 31.2c0 0 10.8-26.6 20.7-15.8 0 0 25.6 37.4 0 43.3C538.1 58.8 509.5 44.7 517.4 31.2z" />
<path d="M466.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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