Hai jumpa lagi dengan saya, kali ini saya akan berbagi tutorial mengenai bagaimana Cara Membuat Animasi Efek Bayangan Dengan HTML-CSS3, Nah penasaran seperti apa animasinya, simak uraian berikut.
Pertama silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.
|
1 2 3 4 5 6 |
<div id="wrapper"> <div id="bulbasaur" class="pokemon"></div> <div id="charmander" class="pokemon"></div> <div id="squirtle" class="pokemon"></div> <div id="pikachu" class="pokemon"></div> </div> |
Setelah kode HTML semua sudah diketikan, lanjutkan untuk kode CSS3 berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
@import url(https://fonts.googleapis.com/css?family=Sigmar+One); /* pokemone pictures */ .pokemon { width: 200px; height: 200px; /* center content using flex box */ display: flex; justify-content: center; align-items: center; /* overlay */ box-shadow: 0 0 0 100px inset, 0 0 5px grey; /* hover out transition */ transition: box-shadow 1s; float: left; margin: 10px; } /* pokemone names */ .pokemon::after { width: 80%; height: 80%; display: block; white-space: pre; font: 15pt 'sigmar one'; color: white; border: 2px solid; text-align: center; /* center content using flex box */ display: flex; justify-content: center; align-items: center; /* hover out transition */ transition: opacity 1s .5s; } /* reveal pokemone picture on hover */ .pokemon:hover { box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset; transition: box-shadow 1s; } /* hide pokemone name on hover */ .pokemon:hover::after { opacity: 0; transition: opacity .5s; } #bulbasaur { background-image: url(http://vignette4.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757); color: rgba(71, 121, 94, .9); } #bulbasaur::after { content: 'Bulbasaur'; } #charmander { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345); color: rgba(221, 86, 63, .9); } #charmander::after { content: 'Charmander' } #squirtle { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525); color: rgba(65, 102, 114, .9); } #squirtle::after { content: 'Squirtle' } #pikachu { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/0/0d/025Pikachu.png/revision/latest/scale-to-width-down/200?cb=20140328192412); color: rgba(179, 152, 98, .9); } #pikachu::after { content: 'Pikachu' } #wrapper { width: 500px; height: 500px; margin: auto; } |
Kalo sudah semuanya diketikan, kemudian disimpan dan jalankan dibrowser masing-masing. Selesai.
Keren yah ? Baik sampai disini tutorial mengenai Cara Membuat Animasi Efek Bayangan Dengan HTML-CSS3, semoga bermanfaat, amin.
Selamat mencoba.