Mys2010 on Codepen

Memasang kode Lighting CSS3
Kode ini menampilkan Text yang disinari cahaya. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
body {
    margin: 0;
    padding: 0;
    background: rgb(0, 0, 0);
    font-family: "Times New Roman", Georgia, Serif;
}
.wrapper {
  position: relative;
  width: 540px;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
  font-family: ‘Arial Narrow’, sans-serif;
  font-size: 98px;
  letter-spacing: 1px;
}

.text {
    position: absolute;
    top: 40px;
    left: 100px;
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    background: transparent;
    text-shadow: 0px 10px 10px rgb(0, 0, 0);
    z-index: 1;
    -webkit-animation: shadow 6.0s ease-in-out infinite;
    animation: shadow 6.0s ease-in-out infinite;
}

.light {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: light 6.0s ease-in-out infinite;
    animation: light 6.0s ease-in-out infinite;
}

.light.two {
    z-index: 2;
    opacity: 0.7;
}

@-webkit-keyframes light {
    0% {

        left: 45px;
    }

    50% {
        left: 335px;
    }

    100% {
        left: 45px;
    }

}

@keyframes light {
      0% {
        left: 45px;
    }
    50% {
        left: 335px;
    }
    100% {
        left: 45px;
    }
}

@-webkit-keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
@keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
</style>

<div class="wrapper">
  <div class="text">
    <p>Your Text</p>
    </div>

     <div class="light"></div>
    <div class="light two"></div></div>

Animated code by. Christofer Vilander
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Animated Preloader