Codevember and ten lines challenge. I have no idea why this looks different on Firefox vs Chrome.
Inspired by Neon Orbit.
Codevember and ten lines challenge. I have no idea why this looks different on Firefox vs Chrome.
Inspired by Neon Orbit.
<div> | |
<div> | |
<div> | |
<div> | |
<div> | |
<div> | |
<div> | |
<div> | |
<div> | |
<div></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
/* | |
The Ten Lines CSS Challenge | |
What can you do with just 10 CSS properties and the given set of 10 HTML elements? | |
The rules: | |
- Don't change the HTML | |
- No JavaScript | |
- No linear gradients or box shadows with more than 10 colors | |
- No CSS reset | |
- No external sources like images | |
- Repeated properties count against the 10 | |
Tag your pens with TenLines to join in on the fun! :) | |
Based on the CSS Haiku idea. | |
*/ |
/* Go crazy here! :) */ | |
body { | |
padding: 5em calc(50% - 200px); | |
overflow: hidden; | |
} | |
body div { | |
animation: anim 8s infinite alternate ease-in; | |
border-radius: 100%; | |
box-shadow: | |
inset 0 0 0 4px #6746e8, | |
inset 0 0 0 8px #43e4cd, | |
inset 0 0 0 16px #e54676, | |
inset 0 0 0 32px #f07a79, | |
inset 0 0 0 64px #fbce7b; | |
width: 400px; | |
height: 400px; | |
} | |
@keyframes anim { | |
50% { | |
transform: | |
scale(0.85) | |
perspective(200px) | |
rotateX(20deg) | |
rotateZ(180deg) | |
rotateY(10deg); | |
} | |
} |