Sharing Teknologi – Membuat Soccer Player Animation Effect HTML CSS Di WordPress. HTML, singkatan dari HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web.
Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, tautan, formulir, dan lainnya. Setiap tag memiliki peran khusus dalam menyusun hierarki konten pada sebuah halaman web. Misalnya, tag <head> berisi informasi metadata, sementara tag <body> memuat konten utama.
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang bekerja bersama HTML untuk mengatur tampilan dan presentasi halaman web. Dengan CSS, pengembang dapat mengontrol properti seperti warna, jenis font, tata letak, dan dekorasi elemen HTML.
Pendekatan ini memisahkan antara struktur dan desain, memungkinkan perubahan gaya tanpa mempengaruhi struktur dasar. Selektor CSS memilih elemen yang akan diubah, sementara properti menentukan bagaimana perubahan tersebut diterapkan.
HTML dan CSS saling melengkapi untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML memberikan kerangka kerja struktural, sementara CSS menambahkan dimensi estetika dan desain. Bersama, keduanya memungkinkan pembuat web untuk membuat halaman yang menarik, responsif, dan mudah diakses di berbagai perangkat.
Dengan evolusi HTML5 dan CSS3, pengembang memiliki akses ke fitur-fitur baru yang memperluas kemampuan pengembangan web. HTML5 memperkenalkan elemen-elemen baru dan mendukung multimedia, sementara CSS3 membawa peningkatan dalam animasi, transisi, dan efek visual. Keduanya tetap menjadi fondasi utama dalam dunia pengembangan web modern, memungkinkan para profesional untuk menciptakan situs web yang dinamis dan responsif.
Di kesempatan kali ini, kami akan berbagi tutorial Membuat Soccer Player Animation Menggunakan HTML CSS.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Soccer Player Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="position-relative p-3 my-1 overflow-hidden">
<div class="soccerplayer">
<div class="ag-block">
<div class="ag-player-red"></div>
<div class="ag-player-green"></div>
<div class="ag-player-red-blue"></div>
<div class="ag-player-green-black"></div>
</div>
</div>
</div>
Style CSS
/* player-red */
.soccerplayer .ag-player-red {
display: inline-block;
height: 319px;
width: 413px;
margin: 0 0 0 50px;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/animation-sprite/images/player-red.png) no-repeat scroll 0 0;
-webkit-animation: an-player-red 2s steps(50) infinite;
-moz-animation: an-player-red 2s steps(50) infinite;
-o-animation: an-player-red 2s steps(50) infinite;
animation: an-player-red 2s steps(50) infinite;
}
@-webkit-keyframes an-player-red {
to {
background-position-x: 100%;
}
}
@-moz-keyframes an-player-red {
to {
background-position-x: 100%;
}
}
@-o-keyframes an-player-red {
to {
background-position-x: 100%;
}
}
@keyframes an-player-red {
to {
background-position-x: 100%;
}
}
/* /player-red */
/* player-green */
.soccerplayer .ag-player-green {
display: inline-block;
height: 319px;
width: 413px;
margin: 0 0 0 50px;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/animation-sprite/images/player-green.png) no-repeat scroll 0 0;
-webkit-animation: an-player-green 2s steps(50) infinite;
-moz-animation: an-player-green 2s steps(50) infinite;
-o-animation: an-player-green 2s steps(50) infinite;
animation: an-player-green 2s steps(50) infinite;
}
@-webkit-keyframes an-player-green {
to {
background-position-x: 100%;
}
}
@-moz-keyframes an-player-green {
to {
background-position-x: 100%;
}
}
@-o-keyframes an-player-green {
to {
background-position-x: 100%;
}
}
@keyframes an-player-green {
to {
background-position-x: 100%;
}
}
/* /player-green */
/* player-red-blue */
.soccerplayer .ag-player-red-blue {
display: inline-block;
height: 430px;
width: 400px;
margin: 0 0 0 50px;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/animation-sprite/images/player-red-blue.png) no-repeat scroll 0 0;
-webkit-animation: an-player-red-blue 3s steps(80) infinite;
-moz-animation: an-player-red-blue 3s steps(80) infinite;
-o-animation: an-player-red-blue 3s steps(80) infinite;
animation: an-player-red-blue 3s steps(80) infinite;
}
@-webkit-keyframes an-player-red-blue {
to {
background-position-x: 100%;
}
}
@-moz-keyframes an-player-red-blue {
to {
background-position-x: 100%;
}
}
@-o-keyframes an-player-red-blue {
to {
background-position-x: 100%;
}
}
@keyframes an-player-red-blue {
to {
background-position-x: 100%;
}
}
/* /player-red-blue */
/* player-green-black */
.soccerplayer .ag-player-green-black {
display: inline-block;
height: 430px;
width: 400px;
margin: 0 0 0 50px;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/animation-sprite/images/player-green-black.png) no-repeat scroll 0 0;
-webkit-animation: an-player-green-black 3s steps(80) infinite;
-moz-animation: an-player-green-black 3s steps(80) infinite;
-o-animation: an-player-green-black 3s steps(80) infinite;
animation: an-player-green-black 3s steps(80) infinite;
}
@-webkit-keyframes an-player-green-black {
to {
background-position-x: 100%;
}
}
@-moz-keyframes an-player-green-black {
to {
background-position-x: 100%;
}
}
@-o-keyframes an-player-green-black {
to {
background-position-x: 100%;
}
}
@keyframes an-player-green-black {
to {
background-position-x: 100%;
}
}
/* /player-green-black */
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar