EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

/* wwdc.css */
.wwdc15 {
    color: #fff;
    font-size: 24px;
    animation: show-site-title 1s ease-out;
    -o-animation: show-site-title 1s ease-out;
    -moz-animation: show-site-title 1s ease-out;
    -webkit-animation: show-site-title 1s ease-out;
}
 
.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(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
 
@keyframes spin {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
 
@-webkit-keyframes spin-pulse {
    0% {
        -webkit-transform: scale(1) rotateZ(0deg);
        transform: scale(1) rotateZ(0deg);
    }
    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(0deg);
        transform: scale(1) rotateZ(0deg);
    }
    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(0deg);
    transform: rotateZ(0deg);
}
 
.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;
}

HTML

Recommendation

Join Effecthub.com