css-失落的人

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           /*居中显示：*/

           body {
               margin: 0;
               height: 100vh;
               display: flex;
               align-items: center;
               justify-content: center;
               background: radial-gradient(lightgray 20%, whitesmoke);
           }
           /*定义容器尺寸：*/

           .man {
               width: 12em;
               height: 33em;
               font-size: 10px;
               position: relative;
           }
           /*定义主色：*/

           .man {
               color: white;
           }
           /*画出头部：*/

           .head {
               position: absolute;
               width: 7em;
               height: 7em;
               background-color: currentColor;
               border-radius: 50%;
               right: 0;
           }
           /*画出身体：*/

           .body {
               position: absolute;
               width: 6.2em;
               height: 14.4em;
               background-color: currentColor;
               top: 7em;
               border-radius: 100% 20% 0 0;
           }
           /*画出脚，现在只能看到一只脚，是因为两只脚重叠在一起，一会儿动起来时就能看到两只脚了：*/

           .feet::before,
           .feet::after {
               content: '';
               position: absolute;
               width: 4em;
               height: 1.4em;
               background-color: white;
               bottom: 0;
               left: -1.6em;
               border-radius: 1em 80% 0.4em 0.4em;
           }
           /*用伪元素画出阴影：*/

           .man::before {
               content: '';
               position: absolute;
               width: 12em;
               height: 0.8em;
               background-color: rgba(0, 0, 0, 0.1);
               bottom: -0.2em;
               left: -3em;
               border-radius: 50%;
           }
           /*增加行走的动画效果，并使两只脚的动画时间交错：*/

           .feet::before,
           .feet::after {
               animation: feet-animation 2s ease-in-out infinite;
           }

           .feet::after {
               animation-delay: 1s;
           }

           @keyframes feet-animation {
               20% {
                   transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
               }
               30% {
                   transform: translateX(4.6em) translateY(-1em) rotate(0deg);
               }
               40% {
                   transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
               }
               44% {
                   transform: translateX(5.6em) translateY(0) rotate(0deg);
               }
           }
           /*增加头和身体起伏的动画效果：*/

           .head,
           .body {
               animation: body-animation 4s ease-in-out infinite;
           }

           @keyframes body-animation {
               0%,
               100% {
                   transform: translateY(0) skewX(-2deg);
               }
               25%,
               75% {
                   transform: translateY(0.5em) skewX(0deg);
               }
               50% {
                   transform: translateY(0) skewX(0deg);
               }
           }
           /*增加阴影面积随身体运动而变化的动画效果：*/

           .man::before {
               animation: shadow-animate 4s ease-in-out infinite;
           }

           @keyframes shadow-animate {
               0%,
               50%,
               100% {
                   transform: scale(1);
               }
               25%,
               75% {
                   transform: scale(1.15);
               }
           }
       </style>
   </head>

<body>

<div class="man">
           <span class="head"></span>
           <span class="body"></span>
           <span class="feet"></span>
       </div>

</body>

</html>

猜你喜欢