Animated Welcome Message With CSS

Animated Welcome Message With CSS - Pesan pembuka atau ucapan sambutan mungkin Anda pernah melihatnya ketika berkunjung di sebuah Blog atau Website . Pesan pembuka bisa berupa text yang dapat berjalan atau dengan image bersifat full windows .

Pesan pembuka yang akan saya share ini berupa text dikombinasikan dengan efek animasi maka akan terlihat lebih menarik. Menciptakan pesan pembuka ini dengan CSS , Anda bisa melihat demonya dengan menekan tombol demo dibawah ini .

Demo

Anda tertarik dan ingin memasangnya pada Blog berikut ini langkah-langkahnya :

Silahkan Anda buka pada Editor template , lalu salin kode dibawah ini dan pastekan di diatas atau sebelum kode  ]]></b:skin>

/*Animated Welcome Message*/
.aak {
font-family: 'Satisfy', cursive;
font-size:80px;
border: none;
color: transparent;
text-align: center;
text-shadow:
0 0 2px rgba(255,255,255,1),
0 0 10px rgba(255,255,255,1),
0 0 20px rgba(255,255,255,1),
0 0 30px rgba(255,255,255,1),
0 0 40px #ff0017,
0 0 70px #ff0017,
0 0 80px #ff0017,
0 0 100px #ff0017;
}

.aak span{
-webkit-transform: rotate(35deg);
-webkit-animation: noser 2s infinite;
}

@keyframes nose {
0%   {}
50%  {}
60%{
text-shadow:
0 0 2px rgba(255, 255, 255, .1),
0 0 10px rgba(255, 255, 255, .4);

text-stroke: 2px rgba(255,255,255,0.05);
}
70%{
text-shadow:
0 0 2px rgba(255,255,255,1),
0 0 10px rgba(255,255,255,1),
0 0 20px rgba(255,255,255,1),
0 0 30px rgba(255,255,255,1),
0 0 40px #ff0017,
0 0 70px #ff0017,
0 0 80px #ff0017,
0 0 100px #ff0017;
}
80%{
text-shadow:
0 0 2px rgba(255, 255, 255, .1),
0 0 10px rgba(255, 255, 255, .4);

text-stroke: 2px rgba(255,255,255,0.05);
}
100% {
text-shadow:
0 0 2px rgba(255,255,255,1),
0 0 10px rgba(255,255,255,1),
0 0 20px rgba(255,255,255,1),
0 0 30px rgba(255,255,255,1),
0 0 40px #ff0017,
0 0 70px #ff0017,
0 0 80px #ff0017,
0 0 100px #ff0017;
  }
}
#nose {
  -webkit-transform: rotate(35deg);
  -webkit-animation: noser 2s infinite;
}
#mouth{
  -webkit-animation: search 2s infinite;
}
#man {
  -webkit-animation: pop 8s infinite;
}
@-webkit-keyframes search {
  0%, 100% { -webkit-transform:translate(0px, 0px);}
  50% {-webkit-transform:translate(32px,0px);}
}
@-webkit-keyframes noser {
  0%, 100% { -webkit-transform:translate(0px) rotate(35deg);}
  50% {-webkit-transform:translate(43px) rotate(-35deg);}
}
@-webkit-keyframes pop {
  0%, 100% { -webkit-transform:translate(0px, 80px)}
  20%, 80% { -webkit-transform:translate(0px, 10px)}
}

Selanjutnya Anda salin kode HTML di bawah ini

<div class="aak">
  Welco<span>m</span>e<br>
  to<br>
  Blog <span class="delay">A</span>ak
</div>

Anda bisa memasangnya pada Entri baru , diatas maupun dibawah header atau dimanapun yang Anda inginkan.

Semoga bermanfaat!

Bagikan Artikel ini