HTML5星球大战银河系II中的低多边形人物造型

Star Wars: Polygons of the Galaxy II, 有点类似于三角形七巧板变形动画。

html5, polygon

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2078
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    font-size: 100%;
    font: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    vertical-align: baseline
}
body {
    line-height: 1
}
ol,
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
.clear {
    clear: both
}
.sticky {}.bypostauthor {}.wp-caption {}.wp-caption-text {}.gallery-caption {}.alignright {}.alignleft {}.aligncenter {} textarea:focus,
input:focus {
    outline: none;
}
*:focus {
    outline: none;
}
body {
    width: 100%;
    font-family: Arial;
    -webkit-font-smoothing: antialiased;
    line-height: 1.1;
    background-color: #131313;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
}
h1 {
    font-size: 30px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 16px;
}
h5 {
    font-size: 14px;
}
h6 {
    font-size: 12px;
}
.normal {
    font-weight: 400;
}
.semibold {
    font-weight: 600;
}
.bold {
    font-weight: 700;
}
p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 16px;
}
b,
strong {
    font-weight: bold;
}
i {
    font-style: italic;
}
a {
    text-decoration: none;
    color: inherit;
}
input {
    -webkit-appearance: none;
}
.wrapper {
    width: 100%;
    float: left;
}
.full-width {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
.fixed-width {
    width: 940px;
    margin: 0 auto;
    box-sizing: border-box;
}
.console {
    width: 700px;
    padding: 0 0 30px 0;
    margin: 0 auto;
    text-align: center;
}
.console h1 {
    margin: 10px 0;
    font-size: 50px;
    color: #b5a204;
}
.console button {
    color: #b5a204;
    border: 1px solid #b5a204;
    padding: 5px 10px;
    background: none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
.console button:hover,
.shadowtrooper .console button#shadowtrooper,
.r2d2 .console button#r2d2,
.darthmaul .console button#darthmaul {
    background: #b5a204;
    color: #131313;
}
.stage {
    width: 500px;
    margin: 0 auto;
}
.main-stage {
    width: 500px;
    height: 500px;
    position: relative;
}
.stage-quote {
    position: relative;
    margin-bottom: 100px;
}
.stage-quote h2 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    color: #b5a204;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -webkit-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
}
.shadowtrooper .quote-shadowtrooper,
.darthmaul .quote-darthmaul,
.r2d2 .quote-r2d2,
.jangofett .quote-jangofett {
    visibility: visible;
    opacity: 1;
}
.triangle {
    position: absolute;
    background-color: #219e12;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
}
.t-1 {
    transition: 1.05s ease-out;
}
.t-2 {
    transition: 1.1s ease-out;
}
.t-3 {
    transition: 1.15s ease-out;
}
.t-4 {
    transition: 1.2s ease-out;
}
.t-5 {
    transition: 1.25s ease-out;
}
.t-6 {
    transition: 1.3s ease-out;
}
.t-7 {
    transition: 1.35s ease-out;
}
.t-8 {
    transition: 1.4s ease-out;
}
.t-9 {
    transition: 1.45s ease-out;
}
.t-10 {
    transition: 1.5s ease-out;
}
.t-11 {
    transition: 1.55s ease-out;
}
.t-12 {
    transition: 1.6s ease-out;
}
.t-13 {
    transition: 1.65s ease-out;
}
.t-14 {
    transition: 1.7s ease-out;
}
.t-15 {
    transition: 1.75s ease-out;
}
.t-16 {
    transition: 1.8s ease-out;
}
.t-17 {
    transition: 1.85s ease-out;
}
.t-18 {
    transition: 1.9s ease-out;
}
.t-19 {
    transition: 1.95s ease-out;
}
.t-20 {
    transition: 2s ease-out;
}
.t-21 {
    transition: 2.05s ease-out;
}
.t-22 {
    transition: 2.1s ease-out;
}
.t-23 {
    transition: 2.15s ease-out;
}
.t-24 {
    transition: 2.2s ease-out;
}
.t-25 {
    transition: 2.25s ease-out;
}
.t-26 {
    transition: 2.3s ease-out;
}
.t-27 {
    transition: 2.35s ease-out;
}
.t-28 {
    transition: 2.4s ease-out;
}
.t-29 {
    transition: 2.45s ease-out;
}
.t-30 {
    transition: 2.5s ease-out;
}
.glimmer .t-1,
.glimmer .t-6,
.glimmer .t-11,
.glimmer .t-16,
.glimmer .t-21,
.glimmer .t-26 {
    animation: glimmer 1.5s;
}
.glimmer .t-2,
.glimmer .t-7,
.glimmer .t-12,
.glimmer .t-17,
.glimmer .t-22,
.glimmer .t-27 {
    animation: glimmer 2s;
}
.glimmer .t-3,
.glimmer .t-8,
.glimmer .t-13,
.glimmer .t-18,
.glimmer .t-23,
.glimmer .t-28 {
    animation: glimmer 2.5s;
}
.glimmer .t-4,
.glimmer .t-9,
.glimmer .t-14,
.glimmer .t-19,
.glimmer .t-24,
.glimmer .t-29 {
    animation: glimmer 3s;
}
.glimmer .t-5,
.glimmer .t-10,
.glimmer .t-15,
.glimmer .t-20,
.glimmer .t-25,
.glimmer .t-30 {
    animation: glimmer 3.5s;
}
@keyframes glimmer {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}
/* Shadowtrooper */

.shadowtrooper .t-1 {
    -webkit-clip-path: polygon(32% 12%, 50% 8%, 68% 12%);
}
.shadowtrooper .t-2 {
    -webkit-clip-path: polygon(32% 12%, 50% 32%, 68% 12%);
}
.shadowtrooper .t-3 {
    -webkit-clip-path: polygon(32% 12%, 24% 32%, 50% 32%);
}
.shadowtrooper .t-4 {
    -webkit-clip-path: polygon(68% 12%, 50% 32%, 76% 32%);
}
.shadowtrooper .t-5 {
    -webkit-clip-path: polygon(21% 32%, 21% 36%, 79% 32%);
}
.shadowtrooper .t-6 {
    -webkit-clip-path: polygon(21% 36%, 79% 32%, 79% 36%);
}
.shadowtrooper .t-7 {
    -webkit-clip-path: polygon(23% 36%, 23% 59%, 50% 36%);
}
.shadowtrooper .t-8 {
    -webkit-clip-path: polygon(50% 36%, 77% 59%, 77% 36%);
}
.shadowtrooper .t-9 {
    -webkit-clip-path: polygon(25% 38%, 29% 47%, 44% 38%);
}
.shadowtrooper .t-10 {
    -webkit-clip-path: polygon(56% 38%, 75% 38%, 72% 47%);
}
.shadowtrooper .t-11 {
    -webkit-clip-path: polygon(19% 37%, 23% 37%, 19% 55%);
}
.shadowtrooper .t-12 {
    -webkit-clip-path: polygon(23% 37%, 19% 55%, 23% 55%);
}
.shadowtrooper .t-13 {
    -webkit-clip-path: polygon(77% 37%, 77% 55%, 81% 37%);
}
.shadowtrooper .t-14 {
    -webkit-clip-path: polygon(81% 37%, 77% 55%, 81% 55%);
}
.shadowtrooper .t-15 {
    -webkit-clip-path: polygon(50% 36%, 23% 59%, 77% 59%);
}
.shadowtrooper .t-16 {
    -webkit-clip-path: polygon(50% 83%, 28% 59%, 72% 59%);
}
.shadowtrooper .t-17 {
    -webkit-clip-path: polygon(23% 59%, 20% 76%, 44% 59%);
}
.shadowtrooper .t-18 {
    -webkit-clip-path: polygon(77% 59%, 56% 59%, 80% 76%);
}
.shadowtrooper .t-19 {
    -webkit-clip-path: polygon(50% 53%, 35% 65%, 50% 59%);
}
.shadowtrooper .t-20 {
    -webkit-clip-path: polygon(50% 53%, 50% 59%, 65% 65%);
}
.shadowtrooper .t-21 {
    -webkit-clip-path: polygon(20% 76%, 48% 80%, 35% 65%);
}
.shadowtrooper .t-22 {
    -webkit-clip-path: polygon(80% 76%, 52% 80%, 65% 65%);
}
.shadowtrooper .t-23 {
    -webkit-clip-path: polygon(20% 76%, 45% 86%, 45% 79%);
}
.shadowtrooper .t-24 {
    -webkit-clip-path: polygon(80% 76%, 55% 86%, 55% 79%);
}
.shadowtrooper .t-25 {
    -webkit-clip-path: polygon(20% 76%, 35% 93%, 45% 86%);
}
.shadowtrooper .t-26 {
    -webkit-clip-path: polygon(80% 76%, 65% 93%, 55% 86%);
}
.shadowtrooper .t-27 {
    -webkit-clip-path: polygon(45% 78%, 45% 88%, 55% 78%);
}
.shadowtrooper .t-28 {
    -webkit-clip-path: polygon(55% 78%, 55% 88%, 45% 88%);
}
.shadowtrooper .t-29 {
    -webkit-clip-path: polygon(30% 86%, 35% 91%, 43% 86%);
}
.shadowtrooper .t-30 {
    -webkit-clip-path: polygon(57% 86%, 65% 91%, 70% 86%);
}
.shadowtrooper .t-1,
.shadowtrooper .t-4,
.shadowtrooper .t-15,
.shadowtrooper .t-21,
.shadowtrooper .t-22 {
    background-color: #3c3c3c;
}
.shadowtrooper .t-2,
.shadowtrooper .t-7,
.shadowtrooper .t-8,
.shadowtrooper .t-16,
.shadowtrooper .t-23,
.shadowtrooper .t-26 {
    background-color: #3c3c3c;
}
.shadowtrooper .t-3,
.shadowtrooper .t-17,
.shadowtrooper .t-18,
.shadowtrooper .t-24,
.shadowtrooper .t-25 {
    background-color: #292929;
}
.shadowtrooper .t-5,
.shadowtrooper .t-12,
.shadowtrooper .t-13,
.shadowtrooper .t-19,
.shadowtrooper .t-27,
.shadowtrooper .t-29,
.shadowtrooper .t-30 {
    background-color: #484848;
}
.shadowtrooper .t-6,
.shadowtrooper .t-9,
.shadowtrooper .t-10,
.shadowtrooper .t-11,
.shadowtrooper .t-14,
.shadowtrooper .t-20,
.shadowtrooper .t-28 {
    background-color: #252525;
}
/* R2D2 */

.r2d2 .t-1 {
    -webkit-clip-path: polygon(50% 29%, 34% 34%, 66% 34%);
}
.r2d2 .t-2 {
    -webkit-clip-path: polygon(16% 67%, 16% 71%, 84% 67%);
}
.r2d2 .t-3 {
    -webkit-clip-path: polygon(84% 67%, 84% 71%, 16% 71%);
}
.r2d2 .t-4 {
    -webkit-clip-path: polygon(16% 63%, 16% 67%, 84% 63%);
}
.r2d2 .t-5 {
    -webkit-clip-path: polygon(84% 63%, 84% 67%, 16% 67%);
}
.r2d2 .t-6 {
    -webkit-clip-path: polygon(16% 59%, 16% 63%, 84% 59%);
}
.r2d2 .t-7 {
    -webkit-clip-path: polygon(84% 59%, 84% 63%, 16% 63%);
}
.r2d2 .t-8 {
    -webkit-clip-path: polygon(16% 59%, 22% 46%, 25% 59%);
}
.r2d2 .t-9 {
    -webkit-clip-path: polygon(22% 46%, 25% 46%, 25% 59%);
}
.r2d2 .t-10 {
    -webkit-clip-path: polygon(84% 59%, 78% 46%, 75% 59%);
}
.r2d2 .t-11 {
    -webkit-clip-path: polygon(78% 46%, 75% 46%, 75% 59%);
}
.r2d2 .t-12 {
    -webkit-clip-path: polygon(22% 46%, 34% 34%, 34% 46%);
}
.r2d2 .t-13 {
    -webkit-clip-path: polygon(78% 46%, 66% 34%, 66% 46%);
}
.r2d2 .t-14 {
    -webkit-clip-path: polygon(25% 46%, 30% 46%, 25% 59%);
}
.r2d2 .t-15 {
    -webkit-clip-path: polygon(30% 59%, 30% 46%, 25% 59%);
}
.r2d2 .t-16 {
    -webkit-clip-path: polygon(75% 46%, 70% 46%, 75% 59%);
}
.r2d2 .t-17 {
    -webkit-clip-path: polygon(70% 59%, 70% 46%, 75% 59%);
}
.r2d2 .t-18 {
    -webkit-clip-path: polygon(30% 46%, 30% 59%, 34% 59%);
}
.r2d2 .t-19 {
    -webkit-clip-path: polygon(30% 46%, 34% 46%, 34% 59%);
}
.r2d2 .t-20 {
    -webkit-clip-path: polygon(70% 46%, 70% 59%, 66% 59%);
}
.r2d2 .t-21 {
    -webkit-clip-path: polygon(70% 46%, 66% 46%, 66% 59%);
}
.r2d2 .t-22 {
    -webkit-clip-path: polygon(34% 34%, 34% 59%, 66% 34%);
}
.r2d2 .t-23 {
    -webkit-clip-path: polygon(66% 59%, 34% 59%, 66% 34%);
}
.r2d2 .t-24 {
    -webkit-clip-path: polygon(42% 37%, 38% 59%, 54% 37%);
}
.r2d2 .t-25 {
    -webkit-clip-path: polygon(38% 59%, 54% 37%, 58% 59%);
}
.r2d2 .t-26 {
    -webkit-clip-path: polygon(48% 38%, 43% 43%, 53% 43%);
}
.r2d2 .t-27 {
    -webkit-clip-path: polygon(48% 48%, 43% 43%, 53% 43%);
}
.r2d2 .t-28 {
    -webkit-clip-path: polygon(59% 54%, 65% 54%, 62% 58%);
}
.r2d2 .t-29 {
    -webkit-clip-path: polygon(49% 54%, 55% 54%, 52% 58%);
}
.r2d2 .t-30 {
    -webkit-clip-path: polygon(50% 29%, 49% 34%, 51% 34%);
}
.r2d2 .t-1,
.r2d2 .t-4,
.r2d2 .t-5,
.r2d2 .t-8,
.r2d2 .t-9,
.r2d2 .t-10,
.r2d2 .t-11,
.r2d2 .t-18,
.r2d2 .t-19,
.r2d2 .t-20,
.r2d2 .t-21,
.r2d2 .t-24,
.r2d2 .t-25 {
    background-color: #225c92;
}
.r2d2 .t-2,
.r2d2 .t-3,
.r2d2 .t-6,
.r2d2 .t-7,
.r2d2 .t-12,
.r2d2 .t-13,
.r2d2 .t-14,
.r2d2 .t-15,
.r2d2 .t-16,
.r2d2 .t-17,
.r2d2 .t-22,
.r2d2 .t-23,
.r2d2 .t-30 {
    background-color: #c8c8c8;
}
.r2d2 .t-26,
.r2d2 .t-27,
.r2d2 .t-28 {
    background-color: #313841;
}
.r2d2 .t-29 {
    background-color: #be0c19;
}
/* Darth Maul */

.darthmaul .t-1 {
    -webkit-clip-path: polygon(50% 33%, 38% 17%, 62% 17%);
}
.darthmaul .t-2 {
    -webkit-clip-path: polygon(38% 17%, 33% 31%, 50% 33%);
}
.darthmaul .t-3 {
    -webkit-clip-path: polygon(62% 17%, 67% 31%, 50% 33%);
}
.darthmaul .t-4 {
    -webkit-clip-path: polygon(33% 31%, 50% 50%, 50% 33%);
}
.darthmaul .t-5 {
    -webkit-clip-path: polygon(67% 31%, 50% 50%, 50% 33%);
}
.darthmaul .t-6 {
    -webkit-clip-path: polygon(33% 31%, 47% 46%, 37% 61%);
}
.darthmaul .t-7 {
    -webkit-clip-path: polygon(67% 31%, 53% 46%, 63% 61%);
}
.darthmaul .t-8 {
    -webkit-clip-path: polygon(50% 12%, 46% 20%, 54% 20%);
}
.darthmaul .t-9 {
    -webkit-clip-path: polygon(38% 17%, 34% 10%, 34% 22%);
}
.darthmaul .t-10 {
    -webkit-clip-path: polygon(62% 17%, 66% 10%, 66% 22%);
}
.darthmaul .t-11 {
    -webkit-clip-path: polygon(33% 31%, 26% 50%, 37% 61%);
}
.darthmaul .t-12 {
    -webkit-clip-path: polygon(67% 31%, 74% 50%, 63% 61%);
}
.darthmaul .t-13 {
    -webkit-clip-path: polygon(32% 25%, 27% 30%, 25% 23%);
}
.darthmaul .t-14 {
    -webkit-clip-path: polygon(68% 25%, 73% 30%, 75% 23%);
}
.darthmaul .t-15 {
    -webkit-clip-path: polygon(38% 17%, 27% 30%, 26% 50%);
}
.darthmaul .t-16 {
    -webkit-clip-path: polygon(62% 17%, 73% 30%, 74% 50%);
}
.darthmaul .t-17 {
    -webkit-clip-path: polygon(26% 50%, 27% 60%, 33% 67%);
}
.darthmaul .t-18 {
    -webkit-clip-path: polygon(74% 50%, 73% 60%, 67% 67%);
}
.darthmaul .t-19 {
    -webkit-clip-path: polygon(26% 50%, 37% 61%, 33% 67%);
}
.darthmaul .t-20 {
    -webkit-clip-path: polygon(74% 50%, 63% 61%, 67% 67%);
}
.darthmaul .t-21 {
    -webkit-clip-path: polygon(27% 60%, 31% 76%, 41% 76%);
}
.darthmaul .t-22 {
    -webkit-clip-path: polygon(73% 60%, 69% 76%, 59% 76%);
}
.darthmaul .t-23 {
    -webkit-clip-path: polygon(31% 76%, 40% 89%, 50% 76%);
}
.darthmaul .t-24 {
    -webkit-clip-path: polygon(69% 76%, 60% 89%, 50% 76%);
}
.darthmaul .t-25 {
    -webkit-clip-path: polygon(50% 76%, 40% 89%, 60% 89%);
}
.darthmaul .t-26 {
    -webkit-clip-path: polygon(33% 67%, 50% 41%, 41% 76%);
}
.darthmaul .t-27 {
    -webkit-clip-path: polygon(67% 67%, 50% 41%, 59% 76%);
}
.darthmaul .t-28 {
    -webkit-clip-path: polygon(50% 41%, 41% 76%, 59% 76%);
}
.darthmaul .t-29 {
    -webkit-clip-path: polygon(36% 48%, 45% 48%, 42% 50%);
}
.darthmaul .t-30 {
    -webkit-clip-path: polygon(64% 48%, 55% 48%, 58% 50%);
}
.darthmaul .t-1,
.darthmaul .t-6,
.darthmaul .t-7,
.darthmaul .t-15,
.darthmaul .t-16,
.darthmaul .t-19,
.darthmaul .t-20,
.darthmaul .t-21,
.darthmaul .t-22,
.darthmaul .t-23,
.darthmaul .t-24,
.darthmaul .t-28 {
    background-color: #1d1d1b;
}
.darthmaul .t-2,
.darthmaul .t-3,
.darthmaul .t-4,
.darthmaul .t-5,
.darthmaul .t-11,
.darthmaul .t-12,
.darthmaul .t-17,
.darthmaul .t-18,
.darthmaul .t-25,
.darthmaul .t-26,
.darthmaul .t-27 {
    background-color: #d8181d;
}
.darthmaul .t-8,
.darthmaul .t-9,
.darthmaul .t-10,
.darthmaul .t-13,
.darthmaul .t-14 {
    background-color: #d8a749;
}
.darthmaul .t-29,
.darthmaul .t-30 {
    background-color: #FFFFFF;
}
/* Jango Fett */

.jangofett .t-1 {
    -webkit-clip-path: polygon(50% 24%, 33% 29%, 67% 29%);
}
.jangofett .t-2 {
    -webkit-clip-path: polygon(50% 48%, 33% 29%, 67% 29%);
}
.jangofett .t-3 {
    -webkit-clip-path: polygon(33% 29%, 25% 48%, 50% 48%);
}
.jangofett .t-4 {
    -webkit-clip-path: polygon(67% 29%, 75% 48%, 50% 48%);
}
.jangofett .t-5 {
    -webkit-clip-path: polygon(25% 48%, 26% 50%, 74% 50%);
}
.jangofett .t-6 {
    -webkit-clip-path: polygon(75% 48%, 74% 50%, 25% 48%);
}
.jangofett .t-7 {
    -webkit-clip-path: polygon(25% 48%, 24% 56%, 30% 59%);
}
.jangofett .t-8 {
    -webkit-clip-path: polygon(75% 48%, 76% 56%, 70% 59%);
}
.jangofett .t-9 {
    -webkit-clip-path: polygon(26% 50%, 27% 53%, 45% 57%);
}
.jangofett .t-10 {
    -webkit-clip-path: polygon(74% 50%, 73% 53%, 55% 57%);
}
.jangofett .t-11 {
    -webkit-clip-path: polygon(26% 50%, 74% 50%, 50% 59%);
}
.jangofett .t-12 {
    -webkit-clip-path: polygon(27% 53%, 30% 59%, 45% 57%);
}
.jangofett .t-13 {
    -webkit-clip-path: polygon(73% 53%, 70% 59%, 55% 57%);
}
.jangofett .t-14 {
    -webkit-clip-path: polygon(30% 59%, 45% 66%, 45% 57%);
}
.jangofett .t-15 {
    -webkit-clip-path: polygon(70% 59%, 55% 66%, 55% 57%);
}
.jangofett .t-16 {
    -webkit-clip-path: polygon(45% 57%, 45% 95%, 50% 59%);
}
.jangofett .t-17 {
    -webkit-clip-path: polygon(55% 57%, 55% 95%, 50% 59%);
}
.jangofett .t-18 {
    -webkit-clip-path: polygon(45% 95%, 50% 59%, 55% 95%);
}
.jangofett .t-19 {
    -webkit-clip-path: polygon(35% 61%, 45% 95%, 45% 66%);
}
.jangofett .t-20 {
    -webkit-clip-path: polygon(65% 61%, 55% 95%, 55% 66%);
}
.jangofett .t-21 {
    -webkit-clip-path: polygon(24% 56%, 21% 82%, 35% 61%);
}
.jangofett .t-22 {
    -webkit-clip-path: polygon(76% 56%, 79% 82%, 65% 61%);
}
.jangofett .t-23 {
    -webkit-clip-path: polygon(75% 48%, 81% 81%, 79% 82%);
}
.jangofett .t-24 {
    -webkit-clip-path: polygon(35% 61%, 21% 82%, 45% 95%);
}
.jangofett .t-25 {
    -webkit-clip-path: polygon(65% 61%, 79% 82%, 55% 95%);
}
.jangofett .t-26 {
    -webkit-clip-path: polygon(21% 43%, 26% 43%, 21% 82%);
}
.jangofett .t-27 {
    -webkit-clip-path: polygon(22% 43%, 25% 12%, 24% 43%);
}
.jangofett .t-28 {
    -webkit-clip-path: polygon(24% 43%, 25% 12%, 27% 11%);
}
.jangofett .t-29 {
    -webkit-clip-path: polygon(29% 10%, 35% 11%, 35% 7%);
}
.jangofett .t-30 {
    -webkit-clip-path: polygon(25% 12%, 23% 6%, 38% 6%);
}
.jangofett .t-1,
.jangofett .t-2,
.jangofett .t-3,
.jangofett .t-4,
.jangofett .t-24,
.jangofett .t-25 {
    background-color: #b3b0a7;
}
.jangofett .t-5,
.jangofett .t-6,
.jangofett .t-7,
.jangofett .t-8,
.jangofett .t-12,
.jangofett .t-13,
.jangofett .t-14,
.jangofett .t-15,
.jangofett .t-19,
.jangofett .t-20,
.jangofett .t-23,
.jangofett .t-26,
.jangofett .t-30 {
    background-color: #36598f;
}
.jangofett .t-9,
.jangofett .t-10,
.jangofett .t-11,
.jangofett .t-16,
.jangofett .t-17,
.jangofett .t-18,
.jangofett .t-21,
.jangofett .t-22 {
    background-color: #1b1b1b;
}
.jangofett .t-27,
.jangofett .t-28,
.jangofett .t-29 {
    background-color: #d3d3d5;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400" rel="stylesheet" type="text/css">

<h1>POLYGONS OF THE GALAXY II</h1>

<button id="shadowtrooper">Shadowtrooper</button>
            <button id="r2d2">R2D2</button>
            <button id="darthmaul">Darth Maul</button>
            <button id="jangofett">Jango Fett</button>
        </div>

</div>

<div class="stage-quote full-width">
                <h2 class="quote-shadowtrooper">I'll give you a hint: It's not just paint</h2>
                <h2 class="quote-r2d2">*beep*</h2>
                <h2 class="quote-darthmaul">At last, we will have revenge</h2>
                <h2 class="quote-jangofett">I'm just a simple man, trying to make my way in the universe</h2>
            </div>
        </div>
    </div>
</body>

Star Wars: Polygons of the Galaxy II, 有点类似于三角形七巧板变形动画。

html5, polygon

编辑器支持Emmet

快捷键

Star Wars: Polygons of the Galaxy II, 有点类似于三角形七巧板变形动画。

html5, polygon

HTML5 低多边形构造的动态背景

HTML5 GSAP星球大战BB8机器人逃亡动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：