Pen #4 for the #CodeVember challenge !
Forked from Delaporte Robin's Pen #CodeVember - Day 4 - Wavy CSS.
Pen #4 for the #CodeVember challenge !
Forked from Delaporte Robin's Pen #CodeVember - Day 4 - Wavy CSS.
section | |
- for i in (1..100) | |
div |
@iterations: 100; | |
.mixin-loop (@i) when (@i > 0) { | |
div:nth-child(@{i}) { | |
-webkit-animation: magic 4s ease infinite alternate; | |
-webkit-animation-delay: (@i * 0.1s); | |
animation: magic 4s ease infinite alternate; | |
animation-delay: (@i * 0.1s); | |
border: 1px solid #A9835D; | |
border-style: inset dotted outset dotted; | |
padding: (@i * 2px); | |
top: (@i * -2px); | |
left: (@i * -2px); | |
} | |
.mixin-loop(@i - 1); | |
} | |
.mixin-loop(@iterations); | |
div { | |
position: absolute; | |
border-radius: 50%; | |
} | |
section { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
} | |
body { | |
background-color: #FDE5C2; | |
//background: #272629; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
@-webkit-keyframes magic { | |
0% { | |
} | |
50% { | |
-webkit-transform: rotate(90deg) skew(15deg); | |
} | |
100% { | |
-webkit-transform: rotate(90deg) skew(45deg); | |
} | |
} | |
@keyframes magic { | |
0% { | |
} | |
50% { | |
transform: rotate(90deg) skew(15deg); | |
} | |
100% { | |
transform: rotate(90deg) skew(45deg); | |
} | |
} |