Walking Boots: These boots are made for walking. Where are they going and for how long?
Project Structure
The project consists of 2 main files:
- index.html - the HTML structure.
- style.css - for styling.
HTML Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
<div class="frame">
<div class="walk-cycle">
<div class="leg left">
<div class="shoe"></div>
</div>
<div class="leg right">
<div class="shoe"></div>
</div>
</div>
<div class="floor"></div>
</div>CSS Styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
// use only the available space inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: rgb(246, 232, 215);
font-family: "Open Sans", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.floor {
position: absolute;
top: 244px;
left: 0;
right: 0;
bottom: 0;
background: #232323;
}
.walk-cycle {
animation: fade-in 0.8s ease-out 1s;
animation-fill-mode: both;
}
.leg {
position: absolute;
top: 0;
left: 147px;
width: 141px;
height: 245px;
transform-origin:50% 0;
}
.shoe {
position: absolute;
width: 151px;
height: 128px;
left: 0;
bottom: 0;
background: url("https://100dayscss.com/codepen/doc-martens.svg") center center
no-repeat;
transform-origin: 0 95%;
}
.left {
animation: leg-swing 2s ease-in-out infinite;
.shoe {
animation: shoe-turn 2s ease-in-out infinite;
}
}
.right {
animation: leg-swing 2s ease-in-out 1s infinite;
.shoe {
animation: shoe-turn 2s ease-in-out 1s infinite;
}
}
@keyframes leg-swing {
0%,
100% {
transform: rotate(-22deg);
}
50% {
transform: rotate(40deg);
}
}
@keyframes shoe-turn {
0%, 100% {
transform: rotate(-10deg) translateY(-5px) translateX(10px);
}
25% {
transform:rotate(0deg) translateY(0px) translateX(0px);
}
50% {
transform:rotate(10deg) translateY(-10px) translateX(10px);
}
75% {
transform:rotate(0deg) translateY(-30px) translateX(-30px);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Reflection
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.