css 样式手形,使用纯CSS实现漂亮的手形艺术图案

CSS

语言：

CSSSCSS

确定

body {

background: #0c1e1e;

width: 100%;

height: 100%;

padding-top: 40px;

}

body .hand {

position: relative;

width: 400px;

height: 500px;

margin: 0 auto;

}

body .hand > * {

position: absolute;

background: #0c1e1e;

}

body .hand .palm {

height: 120px;

width: 120px;

top: 350px;

}

body .hand .palm.bottom-left {

left: 80px;

border-radius: 0 0 0 120px;

background: #dbb92b;

}

body .hand .palm.bottom-left .inner-div {

height: 72px;

width: 72px;

margin-left: 48px;

border-radius: 0 0 0 100px;

background: #0c1e1e;

}

body .hand .palm.bottom-right {

left: 200px;

background: #68634f;

border-radius: 0 0 120px 0;

}

body .hand .finger {

height: 48px;

width: 48px;

}

body .hand .finger.p1 {

top: 302px;

}

body .hand .finger.p2 {

top: 254px;

}

body .hand .finger.p3 {

top: 206px;

}

body .hand .finger.p4 {

top: 158px;

}

body .hand .finger.p5 {

top: 110px;

}

body .hand .finger.p6 {

top: 62px;

}

body .hand .finger.pinky {

left: 80px;

}

body .hand .finger.pinky.p2 {

background: -webkit-repeating-linear-gradient(top, #406a73, #406a73 9.6px, #0c1e1e 9.6px, #0c1e1e 19.2px);

background: repeating-linear-gradient(to bottom, #406a73, #406a73 9.6px, #0c1e1e 9.6px, #0c1e1e 19.2px);

}

body .hand .finger.pinky.p3 {

z-index: 2;

}

body .hand .finger.pinky.p4 {

border-radius: 100px 100px 0 0;

background: #e7552f;

top: 182px;

z-index: 1;

}

body .hand .finger.ring {

left: 128px;

}

body .hand .finger.ring.p1 {

background: #407b3a;

}

body .hand .finger.ring.p3 .inner-div.top {

width: 0;

height: 0;

border-left: 24px solid transparent;

border-right: 24px solid transparent;

border-bottom: 24px solid #dbb92b;

}

body .hand .finger.ring.p3 .inner-div.bottom {

width: 0;

height: 0;

border-left: 24px solid transparent;

border-right: 24px solid transparent;

border-top: 24px solid #dbb92b;

}

body .hand .finger.ring.p4 {

background: #68634f;

}

body .hand .finger.ring.p4 .inner-div {

position: relative;

height: 100%;

border-radius: 100px;

background: #212121;

z-index: 2;

}

body .hand .finger.ring.p5 {

border-radius: 100px 100px 0 0;

background: #ee9022;

top: 134px;

z-index: 1;

}

body .hand .finger.middle {

left: 176px;

}

body .hand .finger.middle.p2 {

background: -webkit-repeating-linear-gradient(left, #ee9022, #ee9022 9.6px, #0c1e1e 9.6px, #0c1e1e 19.2px);

background: repeating-linear-gradient(to right, #ee9022, #ee9022 9.6px, #0c1e1e 9.6px, #0c1e1e 19.2px);

}

body .hand .finger.middle.p3 {

width: 0;

height: 0;

border-top: 48px solid #e7552f;

border-right: 48px solid transparent;

}

body .hand .finger.middle.p4 {

background: #407b3a;

border-radius: 0 0 0 100px;

}

body .hand .finger.middle.p5 {

background: #68634f;

z-index: 2;

}

body .hand .finger.middle.p5 .inner-div.top {

width: 0;

height: 0;

border-left: 24px solid transparent;

border-right: 24px solid transparent;

border-top: 24px solid #0c1e1e;

}

body .hand .finger.middle.p5 .inner-div.bottom {

width: 0;

height: 0;

border-left: 24px solid transparent;

border-right: 24px solid transparent;

border-bottom: 24px solid #0c1e1e;

}

body .hand .finger.middle.p6 {

border-radius: 100px 100px 0 0;

background: #406a73;

top: 86px;

z-index: 1;

}

body .hand .finger.fore {

left: 224px;

}

body .hand .finger.fore.p1 {

border-radius: 100px;

background: #e7552f;

}

body .hand .finger.fore.p3 {

background: #68634f;

}

body .hand .finger.fore.p4 {

z-index: 2;

}

body .hand .finger.fore.p5 {

border-radius: 100px 100px 0 0;

background: #dbb92b;

top: 134px;

z-index: 1;

}

body .hand .finger.thumb {

left: 272px;

}

body .hand .finger.thumb.p2 {

border-radius: 100px 0 0 0;

background: #407b3a;

}