فطر سعيد

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>فطر سعيد </title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1 class="text" data-text="فطر سعيد"> فطر سعيد</h1>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <p class="credits" data-text="عباس جابر | 2018"> عباس جابر | 2018</p>

  </body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Changa');
body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: 'Changa', sans-serif;
}

.credits {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 20px;
  font-size: 2em;
  color: #fff;
  text-shadow: 0 0 20px #cddc39;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 20px;
  font-size: 6em;
  color: #fff;
  text-shadow: 0 0 20px #cddc39;
}

.text:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  z-index: -1;
  color: #cddc39;
  filter: blur(15px);
}

.text:before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: #cddc39;
  filter: blur(140px);
  opacity: 0.75;
}

ul {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  background: #fff;
  list-style: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: animate 1.6s ease-in-out infinite;
}

@keyframes animate {
  0%,
  40%,
  100% {
    transform: scale(0.2);
  }
  20% {
    transform: scale(1);
  }
}

ul li:nth-child(1) {
  animation-delay: -1.4s;
  background#ffff00;
  box-shadow: 0 0 50px #ffff00;
}

ul li:nth-child(2) {
  animation-delay: -1.2s;
  background: #ff7043;
  box-shadow: 0 0 50px #ff7043;
}

ul li:nth-child(3) {
  animation-delay: -1.0s;
  background: #d4e157;
  box-shadow: 0 0 50px #d4e157;
}

ul li:nth-child(4) {
  animation-delay: -0.8s;
  background: #66bb6a;
  box-shadow: 0 0 50px #66bb6a;
}

ul li:nth-child(5) {
  animation-delay: -0.6s;
  background#ffff00;
  box-shadow: 0 0 50px #ffff00;
}

ul li:nth-child(6) {
  animation-delay: -0.4s;
  background: #5c6bc0;
  box-shadow: 0 0 50px #5c6bc0;
}

ul li:nth-child(7) {
  animation-delay: -0.2s;
 ...