Html :
B
A
K
I
M
Css :
@-webkit-keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@-webkit-keyframes arm {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
@keyframes arm {
0% { transform: rotate(0); }
25% { transform: rotate(-18deg); }
50% { transform: rotate(0); }
75% { transform: rotate(18deg); }
100% { transform: rotate(0); }
}
html {
height: 100%;
}
body {
margin: 60px 0 0;
text-align: center;
background: linear-gradient(to bottom, coral, tomato);
}
#robot {
position: absolute;
top:50%; left:50%;
width: 540px;
height: 250px;
margin-top:-125px; margin-left:-270px;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 700;
color: #444;
text-shadow: 0px -1px 1px rgba(0,0,0,.7), 0px 1px 1px rgba(255,255,255,.4);
}
.piston {
float: left;
margin-right: 10px;
position: relative;
width: 100px;
height: 250px;
background: rgba(0,0,0,.1);
border-radius: 10px 10px 50px 50px;
box-shadow: 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(255,255,255,.2);
}
.piston:last-child {
margin: 0;
}
.piston .block {
position: relative;
width: 100px;
height: 60px;
line-height: 60px;
background: #555;
border-radius: 10px;
-webkit-animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;
animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;
box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.2);
}
.piston:nth-child(1) .block { -webkit-animation-delay: 0s; animation-delay: 0s; }
.piston:nth-child(2) .block { -webkit-animation-delay: .1s; animation-delay: .1s; }
.piston:nth-child(3) .block { -webkit-animation-delay: .2s; animation-delay: .2s; }
.piston:nth-child(4) .block { -webkit-animation-delay: .3s; animation-delay: .3s; }
.piston:nth-child(5) .block { -webkit-animation-delay: .4s; animation-delay: .4s; }
.piston .arm {
position: absolute;
top:50%; left:50%;
margin: -10px 0 0 -10px;
width: 20px;
height: 150px;
background: #555;
border-radius: 10px;
box-shadow: inset 0 -22px 0 rgba(0,0,0,.2);
z-index: -1;
-webkit-transform-origin: center 10px;
-webkit-animation: arm 1.2s linear infinite;
-webkit-animation-delay: inherit;
transform-origin: center 10px;
animation: arm 1.2s linear infinite;
animation-delay: inherit;
}
.piston .arm:before,
.piston .arm:after{
content: '';
position: absolute;
right:0; left:0;
height: 16px;
background: #eee;
border-radius: 50%;
margin: 2px;
}
.piston .arm:before { top: 0; }
.piston .arm:after { bottom: 0; }
.piston .rotator {
position: absolute;
bottom: 0;
width: 100px;
height: 100px;
border-radius: 10px;
border-radius: 50%;
border: 20px solid rgba(0,0,0,.1);
box-sizing: border-box;
z-index: -1;
}
Js :
"use strict";var CPLocalStorage={init:function(){this._clearLocalStorageForEveryPageButEditorPages()},_clearLocalStorageForEveryPageButEditorPages:function(){var e=document.location.pathname,t=e.match(/\/(live|pen|collab|professor|details|pres|bye|boomerang|write)/);t||this.clear()},clear:function(){this._exec(function(){localStorage.clear()})},setItem:function(e,t){this._exec(function(){localStorage.setItem(e,t)})},getItem:function(e){return this._exec(function(){return localStorage.getItem(e)})},removeItem:function(e){this._exec(function(){localStorage.removeItem(e)})},_exec:function(e){try{return e()}catch(t){}}};CPLocalStorage.init(),"use strict";var RememberScroll={init:function(){this._scrollToSavedPosition(),this._onUnloadStoreScrollPosition()},_scrollToSavedPosition:function(){var e=CPLocalStorage.getItem(this._getScrollPositionKey());e!==undefined&&window.scrollTo(0,e),CPLocalStorage.removeItem(this._getScrollPositionKey())},_onUnloadStoreScrollPosition:function(){if(window.onunload)return 0;var e=this;window.function(){var t=document.getElementsByTagName("body")[0];CPLocalStorage.setItem(e._getScrollPositionKey(),t.scrollTop)}},_getScrollPositionKey:function(){var e=document.location.pathname.split("/").pop();return"scrollposition:"+e}};RememberScroll.init();