Lava

by adamschwartz

HTML

<div class="lava-plane-outer">
    <div class="lava-plane-inner">
        <div class="lava-outer">
            <div class="lava-inner">
            </div>
        </div>
    </div>
</div>

CSS

html {
    font-size: 800%
}

html, body {
    background: #000
}

@media (max-width: 1440px), (max-height: 720px) { html { font-size: 600% } }
@media (max-width: 1024px), (max-height: 512px) { html { font-size: 400% } }
@media (max-width: 568px), (max-height: 284px)  { html { font-size: 300% } }

@-webkit-keyframes circle {
    from { -webkit-transform: rotate(  0deg) }
    to   { -webkit-transform: rotate(360deg) }
}

@-webkit-keyframes inner-circle {
    from { -webkit-transform: rotate(   0deg) }
    to   { -webkit-transform: rotate(-360deg) }
}

.lava-plane-outer {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10rem;
    width: 10rem;
    margin-left: -5rem;
    margin-top: -5rem;
    -webkit-perspective: 880px
}

.lava-plane-outer * {
    -webkit-transform-style: preserve-3d
}

.lava-plane-inner {
    -webkit-transform: rotateX(63deg);
    height: 100%;
    width: 100%
}

.lava-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: red;
    font-size: 100px;
    line-height: 1;
    -webkit-animation: circle 5s linear infinite;
    -webkit-transform-origin: 50% 50%
        
        ;box-shadow: inset 0 0 100px #9E00AA
}

.lava-inner {
    -webkit-animation: inner-circle 5s linear infinite;
    -webkit-transform-style: preserve-3d;
}