<figure class="shield">
      <div class="shield-off">
        <div class="circles"></div>
        <div class="circles"></div>
      </div>

      <div class="shield-light">
        <div class="circles"></div>
        <div class="circles"></div>

        <div class="rect-box">
          <div class="rect"></div>
          <div class="rect"></div>
          <div class="rect"></div>
          <div class="rect"></div>
        </div>

        <div class="risc-box">
          <div class="risc"></div>
          <div class="risc"></div>
          <div class="risc"></div>
          <div class="risc"></div>
        </div>
      </div>

      <figcaption class="shield-caption">
        <p>WEBSCHOOL</p>
      </figcaption>
  </figure>
* {margin: 0; padding: 0;}

.shield {
    margin: 190px auto;
    position: relative;
    width: 280px;
    height: 280px;
}

.shield-off, .shield-light {  
    position: absolute;  
    background: #374E59;
    width: 280px;
    height: 300px;
    border-radius: 0 0 104% 104% / 0 310px 310px;
}

.shield-off:before, .shield-light:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 8em transparent;
    border-top-color: #374E59;
    position: absolute;
    bottom: -136px;
    border-left-width: 3.4em;
    left: 94px;
    border-top-width: 1em;
    border-right-width: 2.4em;
}

 .shield-light {
    background: #fff;
    border-top: solid 1px #fff;
    z-index: 2;
    -webkit-transform:scale(0.9);
        -moz-transform:scale(0.9);
        -ms-transform:scale(0.9);
        -o-transform:scale(0.9);
        transform:scale(0.9);
 }

 .shield-light:before {
    border-top-color: #fff;
    z-index: 2;
 }

 .shield-off:after, .shield-light:after {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: -60px;
    height: 0;
    border: solid 60px transparent;
    border-bottom-color: #374E59;
    border-top-width: 0px;
    border-left-width: 140px;
    border-right-width: 140px;
}

.shield-light:after {
    border-bottom-color: #fff;
}

.circles {
    width: 179px;
    height: 46px;
    background: white;
    z-index: 2;
    position: absolute;
    border-radius: 50% / 42%;
    top: -68px;
    left: -17px;
    -webkit-transform: rotate(-27deg);
        -moz-transform: rotate(-27deg);
        -ms-transform: rotate(-27deg);
        -o-transform: rotate(-27deg);
        transform: rotate(-27deg);
}

.shield .circles:nth-child(2){
    -webkit-transform: scale(0.9) rotate(25deg);
    -moz-transform: scale(0.9) rotate(25deg);
    -ms-transform: scale(0.9) rotate(25deg);
    -o-transform: scale(0.9) rotate(25deg);
    transform: scale(0.9) rotate(25deg);
    left: 120px;
    top: -65px;
}

.shield-off .circles {
    z-index: 22222222;
}


.shield-light .circles {
    background: #374E59;
}

.shield-caption {
    width: 318px;
    height: 58px;
    background: #374E59;
    position: absolute;
    z-index: 3;
    text-align: center;
    line-height: 60px;
    color: #fff;
    left: -19px;
    bottom: 60px;
    font-family: 'Righteous', sans-serif;
    font-size: 40px;
    -webkit-animation:shieldCaption 5s 1 linear;
        -moz-animation:shieldCaption 5s 1 linear;
        -ms-animation:shieldCaption 5s 1 linear;
        -o-animation:shieldCaption 5s 1 linear;
        animation:shieldCaption 5s 1 linear;
}

.shield-caption:before,.shield-caption:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: solid 19px transparent;
    border-bottom-color: #11181B;
    border-bottom-width: 0;
    border-bottom-width: 12px;
    top: -31px;
    -webkit-animation:shieldBorder 5s 1 linear;
        -moz-animation:shieldBorder 5s 1 linear;
        -ms-animation:shieldBorder 5s 1 linear;
        -o-animation:shieldBorder 5s 1 linear;
        animation:shieldBorder 5s 1 linear;
}

.shield-caption:before {
    left: 0px;
    border-right-width: 1px;
}

.shield-caption:after {
    right: 0px;
    border-left-width: 1px;
}

.shield-caption p {
    color: #fff;
    -webkit-animation:shieldText 5s 1 linear;
        -moz-animation:shieldText 5s 1 linear;
        -ms-animation:shieldText 5s 1 linear;
        -o-animation:shieldText 5s 1 linear;
        animation:shieldText 5s 1 linear;
}

.rect-box {
    position: absolute;
    left: 18px;
    top: 12px;
    z-index: 2222;
    width: 248px;
    height: 140px;

    -webkit-animation:rectBox 5s 1 linear;
        -moz-animation:rectBox 5s 1 linear;
        -ms-animation:rectBox 5s 1 linear;
        -o-animation:rectBox 5s 1 linear;
        animation:rectBox 5s 1 linear;

    -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
}

.rect-box:before {
    content: "";
    width: 32px;
    height: 30px;
    background: #FFF;
    z-index: 10;
    position: absolute;
    top: 55px;
    left: 106px;
    -webkit-transform: rotateZ(-44deg);
        -moz-transform: rotateZ(-44deg);
        -ms-transform: rotateZ(-44deg);
        -o-transform: rotateZ(-44deg);
        transform: rotateZ(-44deg);
}

.rect {
    height: 34px;
    width: 98px;
    background: #10ACC5;
    border-radius: 4px;
    top: 30px;
    position: absolute;
    left: 50px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.72);
    -webkit-transform: rotateZ(-44deg);
    -moz-transform: rotateZ(-44deg);
    -ms-transform: rotateZ(-44deg);
    -o-transform: rotateZ(-44deg);
    transform: rotateZ(-44deg);
}

.rect:first-child {
    z-index: 2;
}

.rect:nth-child(2){
    -webkit-transform: rotateZ(-136deg);
        -moz-transform: rotateZ(-136deg);
        -ms-transform: rotateZ(-136deg);
        -o-transform: rotateZ(-136deg);
        transform: rotateZ(-136deg);
    box-shadow: none;
    top: 76px;
    left: 50px;
    z-index: 3;
}

.rect:nth-child(3){
    box-shadow: none;
    top: 76px;
    background: #007086;
    left: 96px;
    z-index: 4;
}

.rect:nth-child(4){
    -webkit-transform: rotateZ(-136deg);
        -moz-transform: rotateZ(-136deg);
        -ms-transform: rotateZ(-136deg);
        -o-transform: rotateZ(-136deg);
        transform: rotateZ(-136deg);
    box-shadow: none;
    background: #007086;
    top: 30px;
    left: 97px;
    z-index: 1;
}

.risc {
    width: 84px;
    height: 1px;
    background: #31B7CD;
    position: absolute;
    left: 50%;
    top: -3px;
    z-index: 2222;
    margin-left: -42px;
    opacity: 1;
}

.risc:before {
    content: "";
    width: 1px;
    height: 1px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -1.8px;
    margin-left: -2px;
    background: #fff;
    border: solid 2px #31B7CD;
    -webkit-animation:moveRiscCircle 1s infinite alternate linear;
        -moz-animation:moveRiscCircle 1s infinite alternate linear;
        -ms-animation:moveRiscCircle 1s infinite alternate linear;
        -o-animation:moveRiscCircle 1s infinite alternate linear;
        animation:moveRiscCircle 1s infinite alternate linear;
}

.risc:first-child {
    -webkit-animation:risc-1 5s 1 linear;
        -moz-animation:risc-1 5s 1 linear;
        -ms-animation:risc-1 5s 1 linear;
        -o-animation:risc-1 5s 1 linear;
        animation:risc-1 5s 1 linear;
}

.risc:nth-child(2){
    -webkit-animation:risc-2 5s 1 linear;
        -moz-animation:risc-2 5s 1 linear;
        -ms-animation:risc-2 5s 1 linear;
        -o-animation:risc-2 5s 1 linear;
        animation:risc-2 5s 1 linear;
    
    -webkit-transform: rotateZ(-90deg);
        -moz-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
        -o-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);

    top: 81px;
    left: 52px;
}

.risc:nth-child(3){
    -webkit-animation:risc-3 5s 1 linear;
        -moz-animation:risc-3 5s 1 linear;
        -ms-animation:risc-3 5s 1 linear;
        -o-animation:risc-3 5s 1 linear;
        animation:risc-3 5s 1 linear;
    
    -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        -ms-transform: rotateZ(90deg);
        -o-transform: rotateZ(90deg);
        transform: rotateZ(90deg);

    top: 81px;
    right: 50px;
    margin-left: 0;
    margin-right: -39px;
    left: inherit;
}

.risc:nth-child(4){
    top: 100%;
    margin-top: -40px;
    -webkit-animation:risc-4 5s 1 linear;
        -moz-animation:risc-4 5s 1 linear;
        -ms-animation:risc-4 5s 1 linear;
        -o-animation:risc-4 5s 1 linear;
        animation:risc-4 5s 1 linear;
    
    -webkit-transform:rotateZ(180deg);
        -moz-transform:rotateZ(180deg);
        -ms-transform:rotateZ(180deg);
        -o-transform:rotateZ(180deg);
        transform:rotateZ(180deg);
}

@-webkit-keyframes rectBox {
    0%{
        top: -118px;
        opacity: 0;
    }10%{
        top: 12px;
        opacity: 1;
        -webkit-transform:rotateZ(0);
    }15%{
        -webkit-transform:rotateZ(-40deg);
    }20%{
        -webkit-transform:rotateZ(20deg);
    }25%{
        -webkit-transform:rotateZ(-20deg);
    }30%{
        -webkit-transform:rotateZ(0deg);
    }
}

@-moz-keyframes rectBox {
    0%{
        top: -118px;
        opacity: 0;
    }10%{
        top: 12px;
        opacity: 1;
        -moz-transform:rotateZ(0);
    }15%{
        -moz-transform:rotateZ(-40deg);
    }20%{
        -moz-transform:rotateZ(20deg);
    }25%{
        -moz-transform:rotateZ(-20deg);
    }30%{
        -moz-transform:rotateZ(0deg);
    }
}

@-ms-keyframes rectBox {
    0%{
        top: -118px;
        opacity: 0;
    }10%{
        top: 12px;
        opacity: 1;
        -ms-transform:rotateZ(0);
    }15%{
        -ms-transform:rotateZ(-40deg);
    }20%{
        -ms-transform:rotateZ(20deg);
    }25%{
        -ms-transform:rotateZ(-20deg);
    }30%{
        -ms-transform:rotateZ(0deg);
    }
}

@-o-keyframes rectBox {
    0%{
        top: -118px;
        opacity: 0;
    }10%{
        top: 12px;
        opacity: 1;
        -o-transform:rotateZ(0);
    }15%{
        -o-transform:rotateZ(-40deg);
    }20%{
        -o-transform:rotateZ(20deg);
    }25%{
        -o-transform:rotateZ(-20deg);
    }30%{
        -o-transform:rotateZ(0deg);
    }
}

@keyframes rectBox {
    0%{
        top: -118px;
        opacity: 0;
    }10%{
        top: 12px;
        opacity: 1;
        transform:rotateZ(0);
    }15%{
        transform:rotateZ(-40deg);
    }20%{
        transform:rotateZ(20deg);
    }25%{
        transform:rotateZ(-20deg);
    }30%{
        transform:rotateZ(0deg);
    }
}

@-webkit-keyframes shieldCaption {
    0%, 27%{
        width: 0;
    }34% {
        width: 318px;
    }
}

@-moz-keyframes shieldCaption {
    0%, 27%{
        width: 0;
    }34% {
        width: 318px;
    }
}

@-ms-keyframes shieldCaption {
    0%, 27%{
        width: 0;
    }34% {
        width: 318px;
    }
}

@-o-keyframes shieldCaption {
    0%, 27%{
        width: 0;
    }34% {
        width: 318px;
    }
}

@keyframes shieldCaption {
    0%, 27%{
        width: 0;
    }34% {
        width: 318px;
    }
}

@-webkit-keyframes shieldBorder {
    0%, 30%{
        border-bottom-width: 0;
        top: -19px;
    }34% {
        border-bottom-width: 12px;
        top: -31px;
    }
}

@-moz-keyframes shieldBorder {
    0%, 30%{
        border-bottom-width: 0;
        top: -19px;
    }34% {
        border-bottom-width: 12px;
        top: -31px;
    }
}

@-ms-keyframes shieldBorder {
    0%, 30%{
        border-bottom-width: 0;
        top: -19px;
    }34% {
        border-bottom-width: 12px;
        top: -31px;
    }
}

@-o-keyframes shieldBorder {
    0%, 30%{
        border-bottom-width: 0;
        top: -19px;
    }34% {
        border-bottom-width: 12px;
        top: -31px;
    }
}

@keyframes shieldBorder {
    0%, 30%{
        border-bottom-width: 0;
        top: -19px;
    }34% {
        border-bottom-width: 12px;
        top: -31px;
    }
}

@-webkit-keyframes shieldText {
    0%, 32%{
        text-shadow:0 0 120px #fff;
        color: transparent;
    }40% {
        text-shadow:0 0 1px #fff;
        color: transparent;
    }

    43%{
        text-shadow:0 0 0 #fff;
        color: #fff;
    }
}

@-moz-keyframes shieldText {
    0%, 32%{
        text-shadow:0 0 120px #fff;
        color: transparent;
    }40% {
        text-shadow:0 0 1px #fff;
        color: transparent;
    }

    43%{
        text-shadow:0 0 0 #fff;
        color: #fff;
    }
}

@-ms-keyframes shieldText {
    0%, 32%{
        text-shadow:0 0 120px #fff;
        color: transparent;
    }40% {
        text-shadow:0 0 1px #fff;
        color: transparent;
    }

    43%{
        text-shadow:0 0 0 #fff;
        color: #fff;
    }
}


@-o-keyframes shieldText {
    0%, 32%{
        text-shadow:0 0 120px #fff;
        color: transparent;
    }40% {
        text-shadow:0 0 1px #fff;
        color: transparent;
    }

    43%{
        text-shadow:0 0 0 #fff;
        color: #fff;
    }
}



@keyframes shieldText {
    0%, 32%{
        text-shadow:0 0 120px #fff;
        color: transparent;
    }40% {
        text-shadow:0 0 1px #fff;
        color: transparent;
    }

    43%{
        text-shadow:0 0 0 #fff;
        color: #fff;
    }
}

@-webkit-keyframes risc-1 {
    0%, 43%{
        opacity: 0;
        -webkit-transform:translateX(-20px);
    }

    47% {
        opacity: 1;
        -webkit-transform:translateX(0px);
    }
}


@-moz-keyframes risc-1 {
    0%, 43%{
        opacity: 0;
        -moz-transform:translateX(-20px);
    }

    47% {
        opacity: 1;
        -moz-transform:translateX(0px);
    }
}


@-ms-keyframes risc-1 {
    0%, 43%{
        opacity: 0;
        -ms-transform:translateX(-20px);
    }

    47% {
        opacity: 1;
        -ms-transform:translateX(0px);
    }
}


@-o-keyframes risc-1 {
    0%, 43%{
        opacity: 0;
        -o-transform:translateX(-20px);
    }

    47% {
        opacity: 1;
        -o-transform:translateX(0px);
    }
}


@keyframes risc-1 {
    0%, 43%{
        opacity: 0;
        transform:translateX(-20px);
    }

    47% {
        opacity: 1;
        transform:translateX(0px);
    }
}


@-webkit-keyframes risc-2 {
    0%, 43%{
        opacity: 0;
        -webkit-transform:translateY(20px) rotateZ(-90deg);
    }

    47% {
        opacity: 1;
        -webkit-transform:translateY(0px) rotateZ(-90deg);
    }
}


@-moz-keyframes risc-2 {
    0%, 43%{
        opacity: 0;
        -moz-transform:translateY(20px) rotateZ(-90deg);
    }

    47% {
        opacity: 1;
        -moz-transform:translateY(0px) rotateZ(-90deg);
    }
}


@-ms-keyframes risc-2 {
    0%, 43%{
        opacity: 0;
        -ms-transform:translateY(20px) rotateZ(-90deg);
    }

    47% {
        opacity: 1;
        -ms-transform:translateY(0px) rotateZ(-90deg);
    }
}


@-o-keyframes risc-2 {
    0%, 43%{
        opacity: 0;
        -o-transform:translateY(20px) rotateZ(-90deg);
    }

    47% {
        opacity: 1;
        -o-transform:translateY(0px) rotateZ(-90deg);
    }
}


@keyframes risc-2 {
    0%, 43%{
        opacity: 0;
        transform:translateY(20px) rotateZ(-90deg);
    }

    47% {
        opacity: 1;
        transform:translateY(0px) rotateZ(-90deg);
    }
}


@-webkit-keyframes risc-3 {
    0%, 43%{
        opacity: 0;
        -webkit-transform:translateY(-20px) rotateZ(90deg);
    }

    47% {
        opacity: 1;
        -webkit-transform:translateY(0px) rotateZ(90deg);
    }
}


@-moz-keyframes risc-3 {
    0%, 43%{
        opacity: 0;
        -moz-transform:translateY(-20px) rotateZ(90deg);
    }

    47% {
        opacity: 1;
        -moz-transform:translateY(0px) rotateZ(90deg);
    }
}


@-ms-keyframes risc-3 {
    0%, 43%{
        opacity: 0;
        -ms-transform:translateY(-20px) rotateZ(90deg);
    }

    47% {
        opacity: 1;
        -ms-transform:translateY(0px) rotateZ(90deg);
    }
}


@-o-keyframes risc-3 {
    0%, 43%{
        opacity: 0;
        -o-transform:translateY(-20px) rotateZ(90deg);
    }

    47% {
        opacity: 1;
        -o-transform:translateY(0px) rotateZ(90deg);
    }
}


@keyframes risc-3 {
    0%, 43%{
        opacity: 0;
        transform:translateY(-20px) rotateZ(90deg);
    }

    47% {
        opacity: 1;
        transform:translateY(0px) rotateZ(90deg);
    }
}


@-webkit-keyframes risc-4 {
    0%, 43%{
        opacity: 0;
        -webkit-transform:translateX(-20px) rotateZ(180deg);
    }

    47% {
        opacity: 1;
        -webkit-transform:translateX(0px) rotateZ(180deg);
    }
}


@-moz-keyframes risc-4 {
    0%, 43%{
        opacity: 0;
        -moz-transform:translateX(-20px) rotateZ(180deg);
    }

    47% {
        opacity: 1;
        -moz-transform:translateX(0px) rotateZ(180deg);
    }
}


@-ms-keyframes risc-4 {
    0%, 43%{
        opacity: 0;
        -ms-transform:translateX(-20px) rotateZ(180deg);
    }

    47% {
        opacity: 1;
        -ms-transform:translateX(0px) rotateZ(180deg);
    }
}


@-o-keyframes risc-4 {
    0%, 43%{
        opacity: 0;
        -o-transform:translateX(-20px) rotateZ(180deg);
    }

    47% {
        opacity: 1;
        -o-transform:translateX(0px) rotateZ(180deg);
    }
}


@keyframes risc-4 {
    0%, 43%{
        opacity: 0;
        transform:translateX(-20px) rotateZ(180deg);
    }

    47% {
        opacity: 1;
        transform:translateX(0px) rotateZ(180deg);
    }
}


@-webkit-keyframes moveRiscCircle {
    0%{
        -webkit-transform:translateX(-20px);
    }

    100% {
        -webkit-transform:translateX(20px);
    }
}


@-moz-keyframes moveRiscCircle {
    0%{
        -moz-transform:translateX(-20px);
    }

    100% {
        -moz-transform:translateX(20px);
    }
}


@-ms-keyframes moveRiscCircle {
    0%{
        -ms-transform:translateX(-20px);
    }

    100% {
        -ms-transform:translateX(20px);
    }
}


@-o-keyframes moveRiscCircle {
    0%{
        -o-transform:translateX(-20px);
    }

    100% {
        -o-transform:translateX(20px);
    }
}


@keyframes moveRiscCircle {
    0%{
        transform:translateX(-20px);
    }

    100% {
        transform:translateX(20px);
    }
}

External CSS

  1. https://fonts.googleapis.com/css?family=Righteous

External JavaScript

This Pen doesn't use any external JavaScript resources.