CINXE.COM

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>荡秋千</title> <style> 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{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}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}.wrapper{position:absolute;top:50%;left:50%;width:200px;height:200px;-webkit-transform:translate(-50%,-50%) scale(1.2);transform:translate(-50%,-50%) scale(1.2);}.wrapper .pole{position:absolute;width:5px;height:250px;left:50%;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transform:translateX(-50%) rotate(-25deg);transform:translateX(-50%) rotate(-25deg);color:silver;background:currentColor;}.wrapper .pole.two{-webkit-transform:translateX(-50%) rotateY(-180deg) rotate(-25deg);transform:translateX(-50%) rotateY(-180deg) rotate(-25deg);}.wrapper .pole:before{content:"";position:absolute;top:-10px;left:-7px;width:20px;height:20px;border-radius:100%;background:currentColor;}.wrapper .pole:after{content:"";position:absolute;left:0;bottom:0;width:20px;height:5px;-webkit-transform:translateX(-50%) rotate(25deg);transform:translateX(-50%) rotate(25deg);background:currentColor;}.wrapper .swing{position:absolute;width:40px;height:100%;left:calc(50% - 20px);-webkit-transform-origin:center top;transform-origin:center top;-webkit-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;}.wrapper .swing .human{position:absolute;width:40px;height:80px;bottom:5px;z-index:-1;}.wrapper .swing .human .top-part{position:absolute;width:40px;height:80px;bottom:5px;-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-name:body-animation;animation-name:body-animation;-webkit-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;}.wrapper .swing .human .top-part .head{position:absolute;bottom:40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:20px;height:20px;background:#d59e7b;border-radius:100%;z-index:2;}.wrapper .swing .human .top-part .head .hair{position:absolute;top:-5px;left:-10px;background:black;width:22px;height:44px;border-top-right-radius:0%;border-top-left-radius:100%;border-bottom-right-radius:75%;border-bottom-left-radius:10%;z-index:2;}.wrapper .swing .human .top-part .head .fringe{position:absolute;top:-5px;left:0;width:0px;height:0px;border-top:10px solid black;border-bottom:10px solid black;border-left:10px solid transparent;border-right:10px solid transparent;border-radius:100%;-webkit-transform:rotate(45deg);transform:rotate(45deg);}.wrapper .swing .human .top-part .head .eye{content:"";position:absolute;top:6px;right:2px;width:2px;height:2px;background:black;border-radius:100%;}.wrapper .swing .human .top-part .head .mouth{position:absolute;top:10px;right:0px;width:0px;height:0px;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid transparent;border-right:3px solid white;border-radius:100%;-webkit-transform:rotate(28deg);transform:rotate(28deg);}.wrapper .swing .human .top-part .body{position:absolute;bottom:0px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#ee5130;width:20px;height:40px;border-top-left-radius:20px;border-top-right-radius:20px;}.wrapper .swing .human .top-part .body .hand{position:absolute;top:20%;left:10%;}.wrapper .swing .human .top-part .body .hand .hand-one{position:absolute;-webkit-transform:rotate(30deg);transform:rotate(30deg);width:5px;height:15px;background:#ee5130;box-shadow:0 -1px 0px 1px rgba(0,0,0,0.2);border-top-right-radius:100%;border-top-left-radius:100%;}.wrapper .swing .human .top-part .body .hand .hand-two{background:#d59e7b;position:absolute;top:14px;left:-6px;width:4px;height:15px;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transform:rotate(-60deg);transform:rotate(-60deg);border-top-left-radius:15px;}.wrapper .swing .human .leg-one{position:absolute;bottom:0;left:10px;width:40px;height:10px;background:#1973ad;border-bottom-left-radius:20px;border-top-right-radius:20px;z-index:-1;}.wrapper .swing .human .leg-two{position:absolute;width:40px;height:10px;bottom:5px;right:-5px;border-top-right-radius:50%;border-bottom-right-radius:20px;background:#1973ad;-webkit-transform-origin:right center;transform-origin:right center;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-animation-name:leg-animation;animation-name:leg-animation;-webkit-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;}.wrapper .swing .human .leg-two:after{content:"";position:absolute;left:-5px;top:-1px;background:silver;height:18px;width:5px;border-top-left-radius:3px;border-bottom-right-radius:50%;}.wrapper .swing .swing-rod{position:absolute;width:5px;height:200px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#323232;}.wrapper .swing .bottom{position:absolute;width:100%;height:5px;bottom:0;background:saddlebrown;}.wrapper .swing:nth-of-type(1){-webkit-animation-name:swing-1;animation-name:swing-1;}.wrapper .swing:nth-of-type(4){-webkit-animation-name:swing-2;animation-name:swing-2;}@-webkit-keyframes swing-1{from{-webkit-transform:rotate(-35deg);transform:rotate(-35deg);}to{-webkit-transform:rotate(35deg);transform:rotate(35deg);}}@keyframes swing-1{from{-webkit-transform:rotate(-35deg);transform:rotate(-35deg);}to{-webkit-transform:rotate(35deg);transform:rotate(35deg);}}@-webkit-keyframes body-animation{from{-webkit-transform:rotate(-25deg);transform:rotate(-25deg);}to{-webkit-transform:rotate(20deg);transform:rotate(20deg);}}@keyframes body-animation{from{-webkit-transform:rotate(-25deg);transform:rotate(-25deg);}to{-webkit-transform:rotate(20deg);transform:rotate(20deg);}}@-webkit-keyframes leg-animation{from{bottom:2px;right:-8px;-webkit-transform:rotate(-55deg);transform:rotate(-55deg);}to{bottom:2px;right:5px;-webkit-transform:rotate(-170deg);transform:rotate(-170deg);}}@keyframes leg-animation{from{bottom:2px;right:-8px;-webkit-transform:rotate(-55deg);transform:rotate(-55deg);}to{bottom:2px;right:5px;-webkit-transform:rotate(-170deg);transform:rotate(-170deg);}} body { background: #e9e9e9 url(https://cdn.awaw.cc/raw/pdone/static/master/img/bg.jpg) !important; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } </style> </head> <body> <div class="wrapper"> <div class="swing"> <div class="human"> <div class="top-part"> <div class="head"> <div class="hair"></div> <div class="fringe"></div> <div class="eye"></div> <div class="mouth"></div> </div> <div class="body"> <div class="hand"> <div class="hand-one"></div> <div class="hand-two"></div> </div> </div> </div> <div class="leg-one"></div> <div class="leg-two"></div> </div> <div class="swing-rod"></div> <div class="bottom"></div> </div> <div class="pole one"></div> <div class="pole two"></div> </div> </body> </html>