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" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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