Cara Membuat Animasi Text Dengan CSS

06:00:00 38 Comments
Cara Membuat Animasi Text Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

apa kabar semua  ? ^_^
semoga sehat semua yah, dan masih semangat untuk belajar codingnya heheh  ^_^

pada kesempatan kali ini saya akan memberikan tutorial  Cara Membuat Animasi Text Dengan CSS3
pada kali ini animasi yang saya buat adalah animasi text yang berbentuk 3D, 
animasi ini hanya menggunakan css3, sebenarnya animasi ini bukan buatan saya, melainkan programmer  yang bernama  Noah Blon karya dia sengaja saya share karena saya menyukai karyanya :D biar gak penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.

1. Membuat File HTML
Silahkan anda buat file bernama index.html lalu ketikkan lah script di bawah ini 

<!DOCTYPE html>
<html>
<head>
 <title>WIDGET</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="stage">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>
</body>
</html>

Coba anda jalankan file index.htmlnya dan lihat di browser anda. .
ya benar tampilannya akan blank, karena kita belum membuat file cssnya .
silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file inti pada tutorial kali ini, kenapa di sebut file inti, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini

@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Pacifico&text=Pure");
@import url("//fonts.googleapis.com/css?family=Roboto:700&text=css");
@import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!");
body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000);
}

.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
  font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
  content: 'Belajar\A    Coding!';
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: -2px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-2px);
}

.layer:nth-child(3):after {
  transform: translateZ(-4px);
}

.layer:nth-child(4):after {
  transform: translateZ(-6px);
}

.layer:nth-child(5):after {
  transform: translateZ(-8px);
}

.layer:nth-child(6):after {
  transform: translateZ(-10px);
}

.layer:nth-child(7):after {
  transform: translateZ(-12px);
}

.layer:nth-child(8):after {
  transform: translateZ(-14px);
}

.layer:nth-child(9):after {
  transform: translateZ(-16px);
}

.layer:nth-child(10):after {
  transform: translateZ(-18px);
}

.layer:nth-child(11):after {
  transform: translateZ(-20px);
}

.layer:nth-child(12):after {
  transform: translateZ(-22px);
}

.layer:nth-child(13):after {
  transform: translateZ(-24px);
}

.layer:nth-child(14):after {
  transform: translateZ(-26px);
}

.layer:nth-child(15):after {
  transform: translateZ(-28px);
}

.layer:nth-child(16):after {
  transform: translateZ(-30px);
}

.layer:nth-child(17):after {
  transform: translateZ(-32px);
}

.layer:nth-child(18):after {
  transform: translateZ(-34px);
}

.layer:nth-child(19):after {
  transform: translateZ(-36px);
}

.layer:nth-child(20):after {
  transform: translateZ(-38px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}
@keyframes o_O {
  100% {
    opacity: 1;
  }
}
silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah Cara Membuat Animasi Text Dengan CSS, sangat mudah bukan ? :D
Mohon maaf jika tidak ada demonya :D
Silahkan anda coba dan anda kembangkan sendiri .
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ


SHARE THIS
Unknown

Author:

Previous Post
Next Post
Unknown
20 September 2015 at 07:51

thanks gan tutorialnya sangat membantu ^^

Reply
avatar
Unknown
20 September 2015 at 20:14

wah ini yang gue cari cari ijin bookmark gan :3

Reply
avatar
Unknown
21 September 2015 at 04:22

Wah thanks gan tutorialn

Reply
avatar
rul
21 September 2015 at 08:01

Kalo boleh tau DEMO nya mana yah gan?
biar bisa liat jadinya kek gimana
kalo bagus nnti ane coba hehehe~

Reply
avatar
Unknown
21 September 2015 at 10:16

Makasih gan atas tutorialnya sangat membantu

Reply
avatar
Bill
21 September 2015 at 10:41

Gan kalo bisa tambah bahasa java juga, utk web dev udah cakep kok tutornya

Reply
avatar
Nisful Ardi
21 September 2015 at 14:31

Aneh nyerah gan.. Kalo udah berurusan sama html..

Reply
avatar
Erenka
21 September 2015 at 15:19

bisa dicoba nihh :D makasih gan tutornya :D

Reply
avatar
rozim saja
21 September 2015 at 19:46

tambah ilmu baru... sangat bermanfaat.

Reply
avatar
Unknown
21 September 2015 at 20:21

ane langsung praktekin nih gan moga works ya!!

Reply
avatar
Unknown
23 September 2015 at 17:24

Ini yang dicari , dr kemaren" hehe
semangat terus pak

Reply
avatar
Kangray
24 September 2015 at 17:21

kira: bikin berat blog gk gan klo pasang beginian

Reply
avatar
Arie Sujadnorwanto
25 September 2015 at 09:38

fungsi div itu apa ya sebenarnya, saya sering menggunakannya pada div align="center" tapi secara dasar saya kurang paham maksudnya, apakah berbeda dengan p gitu?

Reply
avatar
Unknown
25 September 2015 at 16:13

Cocok banget nih buat anak multimedia :3

Reply
avatar
Unknown
25 September 2015 at 19:21

bagus nih gan atrikel nya untuk cara membuat animasi text dengan css langsung pratek adah dah

Reply
avatar
Abdul Dzikri
25 September 2015 at 19:38

Bermanfaat sekali gan... Nice post..

Reply
avatar
Unknown
25 September 2015 at 21:25

Boleh dicoba nih gan. Nice posting :)

Reply
avatar
Guido Famula
29 September 2015 at 13:29

Maksud position absolute apa gan?

Reply
avatar
Syarifah Aini
1 October 2015 at 21:54

Ini nih yang ane cari ^^ .

Reply
avatar
Guido Famula
5 October 2015 at 14:02

Gan.. sy ggl di lnglh k2 ni..

Reply
avatar
Mas Tamvan
6 October 2015 at 14:21


wah keren nih, ane coba dulu gan :D

Reply
avatar
Mas Tamvan
9 October 2015 at 13:16

Ijin coba buat blog ane gan.
Thanks :)

Reply
avatar
Subscribe to: Post Comments (Atom)