VLmjbo

index.html

<article class="wwdc15">
<span class="large-circles">
 
<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>
</span>
<span class="small-shapes">
 
<div class="small circle one"></div>
<div class="small squircle two"></div>
<div class="small circle three"></div>
<div class="small squircle four"></div>
<div class="small circle five"></div>
<div class="small squircle six"></div>
<div class="small circle seven"></div>
<div class="small squircle eight"></div>
</span>
 
<span class="content-squircle">
<div class="large squircle one"></div>
</span>
<div class="large squircle two">
<div class="content">
<svg viewBox="0 0 160 164" xmlns="http://www.w3.org/2000/svg">
<g>
<g id="svg_1">
<path d="m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308"></path>
</g>
</g>
</svg>
<h1>The epicenter of change.</h1>
<p><strong>WWDC</strong>15</p>
</div>
</div>
</article>

style.css

.logo {
    width: 8em;
    position: absolute;
    left: 1em;
    top: 1em;
}

body {
    background: #fff;
    font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #fff;
    font-size: 24px;
}

.wwdc15 {
    font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #fff;
    font-size: 24px;
}

.wwdc15 span {
    display: block;
    position: absolute;
    top: -webkit-calc(50% - 10em);
    top: calc(50% - 10em);
    left: -webkit-calc(50% - 10em);
    left: calc(50% - 10em);
    width: 20em;
    height: 20em;
}

.wwdc15 .large-circles {
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

.wwdc15 .small-shapes {
    -webkit-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}

.wwdc15 .content-squircle {
    -webkit-animation: spin-pulse 20s linear infinite;
    animation: spin-pulse 20s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes spin-pulse {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(0.9) rotateZ(180deg);
        transform: scale(0.9) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}

@keyframes spin-pulse {
    0% {
        -webkit-transform: scale(1) rotateZ(0);
        transform: scale(1) rotateZ(0);
    }

    50% {
        -webkit-transform: scale(0.9) rotateZ(180deg);
        transform: scale(0.9) rotateZ(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
    }
}

.wwdc15 .circle {
    border-radius: 50%;
    left: -webkit-calc(50% - 6.25em);
    left: calc(50% - 6.25em);
    top: -webkit-calc(50% - 12.5em);
    top: calc(50% - 12.5em);
    -webkit-transform-origin: 50% 12.5em;
    -ms-transform-origin: 50% 12.5em;
    transform-origin: 50% 12.5em;
}

.wwdc15 .squircle {
    border-radius: 25%;
}

.wwdc15 .circle,.wwdc15 .squircle {
    width: 12.5em;
    height: 12.5em;
    position: absolute;
    border-top: 0.1em solid rgba(255,255,255,0.4);
}

.wwdc15 .large.circle {
    -webkit-box-shadow: 0 1em 2em rgba(0,0,0,0.5);
    box-shadow: 0 1em 2em rgba(0,0,0,0.5);
}

.wwdc15 .small {
    width: 4em;
    height: 4em;
    left: -webkit-calc(50% - 2em);
    left: calc(50% - 2em);
    top: -webkit-calc(50% - 15em);
    top: calc(50% - 15em);
    -webkit-transform-origin: 50% 15em;
    -ms-transform-origin: 50% 15em;
    transform-origin: 50% 15em;
    -webkit-box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
    box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}

.wwdc15 .one {
    background: rgba(16,63,236,0.75);
    -webkit-transform: rotateZ(225deg);
    transform: rotateZ(225deg);
}

.wwdc15 .two {
    background: rgba(37,172,162,0.75);
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.wwdc15 .three {
    background: rgba(233,124,32,0.75);
    -webkit-transform: rotateZ(135deg);
    transform: rotateZ(135deg);
}

.wwdc15 .four {
    background: rgba(235,67,35,0.75);
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.wwdc15 .five {
    background: rgba(190,28,65,0.75);
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.wwdc15 .six {
    background: rgba(208,57,159,0.75);
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
}

.wwdc15 .seven {
    background: rgba(150,32,198,0.75);
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.wwdc15 .eight {
    background: rgba(95,33,203,0.75);
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}

.wwdc15 .small.squircle {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.wwdc15 .small.squircle::after {
    content: "";
    border-radius: 25%;
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-box-shadow: -0.25em 0.25em 0.5em rgba(0,0,0,0.2);
    box-shadow: -0.25em 0.25em 0.5em rgba(0,0,0,0.2);
}

.wwdc15 .small.squircle.two::after {
    background: rgba(37,172,162,0.75);
}

.wwdc15 .small.squircle.four::after {
    background: rgba(235,67,35,0.75);
}

.wwdc15 .small.squircle.six::after {
    background: rgba(208,57,159,0.75);
}

.wwdc15 .small.squircle.eight::after {
    background: rgba(95,33,203,0.75);
}

.wwdc15 .large.squircle {
    position: absolute;
    background: rgba(30,7,66,0.65);
    border: none;
    left: -webkit-calc(50% - 7.5em);
    left: calc(50% - 7.5em);
    top: -webkit-calc(50% - 7.5em);
    top: calc(50% - 7.5em);
    width: 15em;
    height: 15em;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.wwdc15 .large.squircle.one {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.wwdc15 .content {
    text-align: center;
}

.wwdc15 .content svg {
    fill: #fff;
    width: 3em;
    margin: 1.25em auto 1em;
}

.wwdc15 .content h1 {
    font-weight: lighter;
    font-size: 1.75em;
    margin: 0.25em auto 1em;
    max-width: 6em;
}

.message {
    position: absolute;
    left: 1em;
    bottom: 1em;
    right: 0;
    color: #222;
    text-align: left;
}

.message a {
    text-decoration: none;
    font-weight: bold;
    color: #999;
}

.circles .wwdc15.centered .circle {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.circles .wwdc15.centered span {
    -webkit-animation: animateup 2s linear forwards;
    animation: animateup 2s linear forwards;
}

.circles .wwdc15 .large.circle {
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.circles .wwdc15 .large.circle:nth-child(8) {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

.circles .wwdc15 .large.circle:nth-child(7) {
    -webkit-transition-duration: 1.1s;
    transition-duration: 1.1s;
}

.circles .wwdc15 .large.circle:nth-child(6) {
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
}

.circles .wwdc15 .large.circle:nth-child(5) {
    -webkit-transition-duration: 1.3s;
    transition-duration: 1.3s;
}

.circles .wwdc15 .large.circle:nth-child(4) {
    -webkit-transition-duration: 1.4s;
    transition-duration: 1.4s;
}

.circles .wwdc15 .large.circle:nth-child(3) {
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

.circles .wwdc15 .large.circle:nth-child(2) {
    -webkit-transition-duration: 1.6s;
    transition-duration: 1.6s;
}

.circles .wwdc15 .large.circle:nth-child(1) {
    -webkit-transition-duration: 1.7s;
    transition-duration: 1.7s;
}

@-webkit-keyframes animateup {
    0% {
        -webkit-transform: translateY(6.25em);
        transform: translateY(6.25em);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes animateup {
    0% {
        -webkit-transform: translateY(6.25em);
        transform: translateY(6.25em);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

VLmjbo.markdown

VLmjbo ('-' * 6)

A Pen by Airen on CodePen.

License.