html5 人物画像,HTML5/CSS3齐天大圣孙悟空肖像

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes hover {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(-1.5em);

transform: translateY(-1.5em);

}

}

@keyframes hover {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(-1.5em);

transform: translateY(-1.5em);

}

}

@-webkit-keyframes shadow {

0% {

background-color: rgba(0, 0, 0, 0.2);

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

background-color: rgba(0, 0, 0, 0.08);

-webkit-transform: scale(0.7);

transform: scale(0.7);

}

}

@keyframes shadow {

0% {

background-color: rgba(0, 0, 0, 0.2);

-webkit-transform: scale(1);

transform: scale(1);

}

100% {

background-color: rgba(0, 0, 0, 0.08);

-webkit-transform: scale(0.7);

transform: scale(0.7);

}

}

*,

*::before {

box-sizing: border-box;

margin: 0;

padding: 0;

border: 0;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

width: 100vw;

height: 100vh;

-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;

font-family: "Sigmar One", cursive;

font-size: 100%;

overflow: hidden;

}

@media (orientation: portrait) {

monkey-scene {

font-size: 2vw;

}

}

@media (orientation: landscape) {

monkey-scene {

font-size: 2vh;

}

}

monkey-scene {

width: 30em;

height: 30em;

position: relative;

}

monkey-scene *,

monkey-scene *::before {

display: block;

position: absolute;

}

monkey-scene h1 {

top: 1.5em;

left: auto;

color: Silver;

font-family: "Sigmar One", cursive;

font-size: 5em;

line-height: 1;

text-align: center;

}

monkey-king {

top: 12.5em;

left: 12em;

-webkit-animation: hover 2s alternate infinite ease-in-out;

animation: hover 2s alternate infinite ease-in-out;

}

monkey-head {

width: 6em;

height: 6em;

border-radius: 50%;

background-color: Brown;

}

monkey-head::before {

top: 5.9em;

left: 2.25em;

content: "";

border-width: 1.5em 0.75em 0 0.75em;

border-style: solid;

border-color: Brown transparent;

}

monkey-face {

width: 5em;

height: 3.5em;

top: 2.5em;

left: 0.5em;

border-radius: 50%;

background-color: Pink;

}

monkey-forehead {

width: 2.5em;

height: 3.5em;

top: -1em;

left: 0.25em;

border-radius: 50%;

background-color: Pink;

box-shadow: 2em 0 Pink;

}

monkey-eyes {

width: 1em;

height: 0.5em;

top: 2.3em;

left: 0.8em;

border-radius: 50%;

background-color: Pink;

box-shadow: 0 -0.2em Black, 1.8em 0 Pink, 1.8em -0.2em Black;

}

monkey-ears {

width: 2em;

height: 2em;

top: 2.75em;

left: -1em;

border-radius: 50%;

background-color: Pink;

z-index: -1;

box-shadow: 6em 0 Pink;

}

monkey-mouth {

width: 1.5em;

height: 1em;

top: 1.8em;

left: 1.75em;

border-radius: 50%;

box-shadow: 0 0.2em Red;

}

monkey-crown {

width: 6em;

height: 1em;

top: 1.5em;

left: 0em;

border-radius: 50%;

box-shadow: 0 0.3em Gold;

}

monkey-body {

width: 5em;

height: 4em;

top: 5em;

left: 0.5em;

border-radius: 2.5em 2.5em 0 0;

background-color: Orange;

}

monkey-legs {

width: 10em;

height: 4em;

top: 9em;

left: -2em;

border-radius: 2em 2em 50% 50%;

background-color: Orange;

}

monkey-hands {

width: 3em;

height: 2em;

top: 8.5em;

left: 1.5em;

border-radius: 1em;

background-color: Pink;

box-shadow: 0.5em 0 Brown inset, -0.5em 0 Brown inset;

}

monkey-shadow {

width: 8em;

height: 1em;

top: 26em;

left: 11em;

border-radius: 50%;

-webkit-animation: shadow 2s alternate infinite ease-in-out;

animation: shadow 2s alternate infinite ease-in-out;

}