<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%;
  }

HTML, BODY {
  height: 100%;
}
BODY {
  margin: 0;
  overflow: hidden;
  background: hsl(200, 100%, 70%);
  background: radial-gradient(white 100px, hsl(200, 100%, 70%) 50em);
  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 #FFF,
               -2px -2px #FFF,
               -1px 1px #FFF,
               -2px 2px #FFF,
               1px 1px #FFF,
               2px 2px #FFF,
               1px -1px #FFF,
               2px -2px #FFF,
               -3px -3px 2px #CCC,
               -3px 3px 2px #CCC,
               3px 3px 2px #CCC,
               3px -3px 2px #CCC;
  color: hsl(200, 100%, 75%);
  transition: all .7s;
  }
  .text:hover {
    color: hsl(200, 100%, 60%);
    }
UL {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  padding: 0;
  width: 0;
  height: 0;
  list-style: none;
  animation: 5s rotate infinite linear;    
}
LI,
LI:before,
LI:after {
  position: absolute;
  border: 0 solid transparent;
  border-width: 2em 20em;
  width: 1px;
  height: 1px;
  font-size: 30px;
  box-shadow: 0 0 2em .5em white;
}
LI {
  left: -20em;
  top: 50%;
  margin-top: -2em;
  transform: rotate(.1deg);
  }
LI:before,
LI:after {
  left: -20em;
  top: -2em;
  display: block;
  content: "";
}

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

LI:nth-child(2){
  transform: rotate(15deg);
}
LI:nth-child(3){
  transform: rotate(30deg);
}
LI:nth-child(4){
  transform: rotate(45deg);
}


@keyframes rotate {
  100% {
    transform: rotate(90deg);
  }
}