Salam Sejahterah untuk kita semua. Semoga Allah SWT senantiasa memberi Rahmad dan Hidayahnya Kepada kita dalam menjalankan aktifitas sehari-hari Amin.. :)
Berjumapa lagi dengan saya di blog kesayangan kita ini K0de Tani . :)
Langsung aja sesuai dengan judulnya yaitu membuat animasi menggunakan html dan css.
langkah awal yaitu sama seperti biasa buka aplikasi texteditor kalian, boleh menggunakan notpad atau sublimetxt. kalu tidak ada silahkan download terlebihdahulu di Google.
selanjutnya buat file berinama index.html atau index.php juga bisa. lalu pastekan kode berikut di dalamny.
- <html>
- <head>
- <title>Animasi</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <div class="loader">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </body>
- </html>
Langkah selanjutnya membuat file style.css.
fungsi file ini adalah untuk membuat ukuran animasi dan warna animasi yang akan di buat.
isikan code berikut di dalam file style.css, lau simpan.
- body{
- margin: 0;
- padding: 0;
- background:#023d24;
- }
- .loader{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%) rotate(45deg);
- width: 100px;
- height: 100px;
- animation: ani 1s linear infinite
- }
- .loader span{
- position: absolute;
- width: 50px;
- height: 50px;
- background: #f00;
- animation: rotade 1s linear infinite
- }
- .loader span:nth-child(1){
- top: 0;
- left: 0;
- background: #ff0017;
- }
- .loader span:nth-child(2){
- top: 0;
- right: 0;
- background: #fff000;
- }
- .loader span:nth-child(3){
- bottom: 0;
- right: 0;
- background: #289200;
- }
- .loader span:nth-child(4){
- bottom: 0;
- left: 0;
- background: #3600ff;
- }
- @keyframes ani{
- 0%{
- width: 100px;
- height: 100px;
- }
- 10%{
- width: 100px;
- height: 100px;
- }
- 50%{
- width: 150px;
- height: 150px;
- }
- 90%{
- width: 100px;
- height: 100px;
- }
- 100%{
- width: 100px;
- height: 100px;
- }
- }
- @keyframes rotade{
- 0%{
- transform: rotate(0deg);
- }
- 10%{
- transform: rotate(0deg);
- }
- 50%{
- transform: rotate(90deg);
- }
- 90%{
- transform: rotate(90deg);
- }
- 100%{
- transform: rotate(90deg);
- }
- }
- }
maka hasilnya akan jadi seperti ini :
semoga bermanfaat untuk kawan-kawan.
silahkan dikembangkan lagi ide kreatifnya. :)