<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG 低多边形 狮子头像动画</title>
<style>
html,
body {
height: 100%;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
background: #f9d8ad;
}
svg {
max-width: 100%;
height: 800px;
}
svg polygon {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.no-js svg polygon {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
<polygon points="392,85 380,128 339,98" style="fill: #FADFAA" />
<polygon points="392,85 380,128 412,111" style="fill: #EABA8C" />
<polygon points="339,98 380,128 340,140" style="fill: #FAD398" />
<polygon points="339,98 340,140 309,142" style="fill: #DFA387" />
<polygon points="339,98 309,142 286,133" style="fill: #F9D8AD" />
<polygon points="392,85 412,111 443,101" style="fill: #DBB08E" />
<polygon points="443,101 412,111 434,126" style="fill: #D59F7D" />
<polygon points="443,101 434,126 475,122" style="fill: #FACC91" />
<polygon points="412,111 380,128 402,132" style="fill: #CE8670" />
<polygon points="412,111 402,132 418,142" style="fill: #BC716C" />
<polygon points="309,142 340,140 309,185" style="fill: #BC716C" />
<polygon points="412,111 434,126 418,142" style="fill: #D1806D" />
<polygon points="434,126 475,122 462,137" style="fill: #F8DC9B" />
<polygon points="475,122 462,137 509,139" style="fill: #FAD295" />
<polygon points="434,126 462,137 425,155" style="fill: #DC8C6B" />
<polygon points="434,126 425,155 418,142" style="fill: #EC9B6C" />
<polygon points="380,128 402,132 369,156" style="fill: #E49C76" />
<polygon points="380,128 369,156 340,140" style="fill: #DD8D76" />
<polygon points="402,132 396,168 369,156" style="fill: #DB8A6F" />
<polygon points="462,137 509,139 491,171" style="fill: #FBC27F" />
<polygon points="425,155 462,137 461,173" style="fill: #CE7660" />
<polygon points="340,140 327,193 309,185" style="fill: #BF5D76" />
<polygon points="402,132 418,142 396,168" style="fill: #A8526D" />
<polygon points="286,133 309,142 292,179" style="fill: #F6B78B" />
<polygon points="509,139 491,171 542,154" style="fill: #F7CB8C" />
<polygon points="542,154 491,171 520,192" style="fill: #D99860" />
<polygon points="418,142 410,172 425,155" style="fill: #D4846D" />
<polygon points="410,172 425,155 431,188" style="fill: #EFA872" />
<polygon points="425,155 460,187 461,173" style="fill: #954A5E" />
<polygon points="369,156 340,140 344,188" style="fill: #C46374" />
<polygon points="286,133 292,179 258,161" style="fill: #B95E7F" />
<polygon points="258,161 261,177 255,195" style="fill: #944F8B" />
<polygon points="418,142 396,168 410,172" style="fill: #B45E69" />
<polygon points="462,137 461,173 491,171" style="fill: #D7835F" />
<polygon points="491,171 482,192 520,192" style="fill: #BD6D56" />
<polygon points="461,173 491,171 482,192" style="fill: #B05D59" />
<polygon points="461,173 482,192 460,187" style="fill: #82365A" />
<polygon points="258,161 292,179 261,177" style="fill: #9C4083" />
<polygon points="309,142 292,179 309,185" style="fill: #B75D79" />
<polygon points="369,156 362,192 380,183" style="fill: #F9CB8D" />
<polygon points="292,179 301,203 278,191" style="fill: #C86E78" />
<polygon points="261,177 292,179 278,191" style="fill: #EA9E86" />
<polygon points="292,179 309,185 301,203" style="fill: #AF5078" />
<polygon points="369,156 344,188 362,192" style="fill: #D59071" />
<polygon points="431,188 425,155 460,187" style="fill: #F9CD90" />
<polygon points="340,140 344,188 327,193" style="fill: #AD4F74" />
<polygon points="380,183 380,206 388,187" style="fill: #E0A072" />
<polygon points="344,188 322,223 342,208" style="fill: #E8AA7D" />
<polygon points="380,183 388,187 396,168" style="fill: #ECB984" />
<polygon points="388,187 408,193 396,168" style="fill: #F9D49D" />
<polygon points="380,183 396,168 369,156" style="fill: #F9D49D" />
<polygon points="261,177 278,191 255,195" style="fill: #EDAD87" />
<polygon points="278,191 277,203 301,203" style="fill: #A55079" />
<polygon points="380,206 388,187 408,193" style="fill: #F3BB7E" />
<polygon points="431,188 460,187 464,208" style="fill: #F7BC76" />
<polygon points="344,188 362,192 342,208" style="fill: #CC8571" />
<polygon points="362,192 380,183 380,206" style="fill: #F7C185" />
<polygon points="460,187 490,213 482,192" style="fill: #8A4256" />
<polygon points="362,192 380,206 361,205" style="fill: #DC9D72" />
<polygon points="327,193 344,188 322,223" style="fill: #C9766E" />
<polygon points="327,193 322,223 306,217" style="fill: #A35370" />
<polygon points="255,195 278,191 277,203" style="fill: #B4607A" />
<polygon points="255,195 277,203 252,222" style="fill: #A5497A" />
<polygon points="327,193 309,185 301,203 306,217" style="fill: #933A73" />
<polygon points="362,192 361,205 348,223" style="fill: #C67468" />
<polygon points="348,223 361,205 380,206" style="fill: #662366" />
<polygon points="520,192 482,192 490,213 520,205" style="fill: #974F53" />
<polygon points="460,187 464,208 490,213" style="fill: #E19E67" />
<polygon points="342,208 362,192 348,223" style="fill: #B26369" />
<polygon points="490,213 520,205 529,218" style="fill: #5E2A50" />
<polygon points="464,208 490,213 468,220" style="fill: #DB9460" />
<polygon points="277,203 294,221 306,217 301,203" style="fill: #6A2774" />
<polygon points="490,213 529,218 500,245" style="fill: #8F4A4F" />
<polygon points="277,203 252,222 294,221" style="fill: #802A75" />
<polygon points="342,208 348,223 322,223" style="fill: #F9C589" />
<polygon points="252,222 294,221 287,236" style="fill: #A75472" />
<polygon points="322,223 348,223 331,253" style="fill: #F1BB7F" />
<polygon points="331,253 348,223 342,245" style="fill: #D8996E" />
<polygon points="500,245 529,218 498,273" style="fill: #A05A50" />
<polygon points="331,253 351,253 345,280" style="fill: #F8BF7A" />
<polygon points="498,273 509,320 520,279" style="fill: #EEA65A" />
<polygon points="468,284 498,273 471,303" style="fill: #BB6C4B" />
<polygon points="471,303 498,273 509,320" style="fill: #E89553" />
<polygon points="471,303 509,320 466,320" style="fill: #B77954" />
<polygon points="466,320 509,320 468,338" style="fill: #A15B53" />
<polygon points="520,279 509,320 522,330" style="fill: #F2BA70" />
<polygon points="534,304 522,330 562,331" style="fill: #BC7255" />
<polygon points="522,330 562,331 550,386" style="fill: #A5625C" />
<polygon points="509,320 522,330 490,351" style="fill: #CD8754" />
<polygon points="509,320 490,351 468,338" style="fill: #AF6751" />
<polygon points="468,338 490,351 440,382" style="fill: #BF7B54" />
<polygon points="468,338 440,382 444,350" style="fill: #A65E52" />
<polygon points="490,351 522,330 51
TweenMax.js + SVG 实现的低多边形狮子头像动画效果源码.zip
版权申诉
38 浏览量
2022-11-01
00:09:02
上传
评论
收藏 70KB ZIP 举报
TweenMax.js + SVG 实现的低多边形狮子头像动画效果源码.zip （3个子文件） 
132677959137655340 
index.html 20KB js 
jquery-1.11.1.min.js 94KB TweenMax.min.js 99KB资源评论
