#Codevember - Day 1

#Codevember - Day 1.markdown

#Codevember - Day 1

Codevember and ten lines challenge. I have no idea why this looks different on Firefox vs Chrome.

Inspired by Neon Orbit.

A Pen by Giana on CodePen.

License.

index.html

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

script.js

/*
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.

*/

style.css

/* 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);
  }
}