<!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>HTML5+CSS3齐天大圣孙悟空肖像</title>
<style>
@-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;
}
</style>
</head>
<body>
<monkey-scene>
<h1>齐天大圣孙悟空</h1>
<monkey-shadow></monkey-shadow>
<monkey-king>
<monkey-body></monkey-body>
<monkey-legs></monkey-legs>
<monkey-hands></monkey-hands>
<monkey-head>
<monkey-face>
<monkey-forehead>
<monkey-eyes></monkey-eyes>
</monkey-forehead>
<monkey-mouth></monkey-mouth>
</monkey-face>
<monkey-ears></monkey-ears>
<monkey-crown></monkey-crown>
</monkey-head>
</monkey-king>
</monkey-scene>
</body>
</html>
