<body>
  <div class="wrapper">
    <h1 class="text">Magic rays</h1>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>  
  </div>
@import url(https://fonts.googleapis.com/css?family=Lobster);

HTML, BODY {
  height: 100%;
  }

BODY {
  margin: 0;
  overflow: hidden;
  background: #F4CE68;
  background-size: cover;
  font-size: 10px;
  }
.wrapper {
  position: relative;
  height: 100%;
  }
.text {
  position: relative;
  z-index: 1;
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  height: 1em;
  font: 6em/1 Lobster, Georgia, cursive;
  text-align: center;
  text-shadow: -1px -1px #EE8A08,
               -2px -2px #EE8A08,
               -1px 1px #EE8A08,
               -2px 2px #EE8A08,
               1px 1px #EE8A08,
               2px 2px #EE8A08,
               1px -1px #EE8A08,
               2px -2px #EE8A08,
               -3px -3px 1px #F33F15,
               -3px 3px 1px #F33F15,
               3px 3px 1px #F33F15,
               3px -3px 1px #F33F15,
               -4px -4px 1px #F33F15,
               -4px 4px 1px #F33F15,
               4px 4px 1px #F33F15,
               4px -4px 1px #F33F15;
  color: #F4CE68;
  transition: all .7s;
  }

UL {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  padding: 0;
  width: 0;
  height: 0;
  list-style: none;
  animation: 10s rotate infinite linear;    
}
LI,
LI:before,
LI:after {
  position: absolute;
  border: 0 solid transparent;
  border-width: 1.2em 20em;
  border-color: transparent #EE8A08;
  width: 0;
  height: 0;
  font-size: 40px;
  }
LI {
  left: -20em;
  top: 50%;
  margin-top: -1.2em;
  transform: rotate(.1deg);
  }
LI:before,
LI:after {
  left: -20em;
  top: -1.2em;
  display: block;
  content: "";
}

LI:before {
  transform: rotate(60deg);
  }
LI:after {
  transform: rotate(-60deg);
  }

LI:nth-child(2){
  transform: rotate(15deg);
  }
LI:nth-child(2),
LI:nth-child(2):before,
LI:nth-child(2):after {
  border-color: transparent #F45E04;
  }
LI:nth-child(3){
  transform: rotate(30deg);
  }
LI:nth-child(3),
LI:nth-child(3):before,
LI:nth-child(3):after {
  border-color: transparent #F33F15;
  }
LI:nth-child(4){
  transform: rotate(45deg);
  }
LI:nth-child(4),
LI:nth-child(4):before,
LI:nth-child(4):after {
  border-color: transparent #7B8F64;
  }


@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.