Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi

Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi - SAHABAT BLOGGER 77

Cara Membuat Efek Teks Berputar Dengan Balutan Objek Cincin Pelangi - Pseudo CSS animasi pada elemen dalam bahasa markup merupakan kelas pembangun untuk perintah gerak otomatis pada sebuah media objek, untuk lebih jelasnya seperti apa penggunaan rangkaian kodenya dapat Anda baca di Cara Membuat Efek CSS Animasi Pada Tulisan. Sebagai media objek yang akan di buat gerak, saya coba pada teks yang pembangun kodenya saya bentuk menggunakan Elemen CSS Pseudo Animasi, Sedangkan bentuk kelas pada elemen transisi merupakan efek gerak dengan perintah hover (sentuhan).

CSS (Cascading Style Sheet) merupakan bentuk elemen pelengkap dan pengatur dalam pemanggil HTML, sehingga tanpa harus menyimpannya dalam pengaturan HTML template, rangkaiaan keseluruhan kodenya dapat kita sisipkan pada penyimpan kode widget-gadget pada tata letak dahsbor blog.
Pada tutorial kali ini, saya menggunakan bentuk elemen CSS yang sama, namun efek yang berbeda untuk membuat efek teks berputar dengan balutan objek cincin pelangi.

Artikel Transisi Efek - Cara Membuat Efek Remote Link Pada Gambar




DEMO SHOW     GET IN CODE


Bentuk elemen CSS animasi berikut, saya menambahkan kode animasi-name: ring dan animasi-iteration. Agar tampilan efek putarnya bulat, saya membuat lebar content dengan kode width: inherit dan height: inherit. Berikut rangkaiaan kodenya:

.ring-loading {
  background: rgba(0, 50, 250, 0);
  position: relative;
  margin: 5em auto 0 auto;
  width: 10em; height: 10em;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  animation-name: rotate;}

.ring-loading,
.ring-loading:before,
.ring-loading:after {
  border-radius: 100%;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  -ms-animation-timing-function: ease-in;
  animation-timing-function: ease-in;}

.ring-loading:before,
.ring-loading:after {
  content: "";
  position: absolute;
  top: 0;left: 0;
  width: inherit; height: inherit;}

.ring-loading:before {
  background: rgba(200, 250, 100, 0);
  -webkit-animation-name: ring;
  -moz-animation-name: ring;
  -ms-animation-name: ring;
  animation-name: ring;}

.ring-loading:after {
  background: rgba(250, 0, 200, 0);
  -webkit-animation-name: ring2;
  -moz-animation-name: ring2;
  -ms-animation-name: ring2;
  animation-name: ring2;}

.ring-loading p {
  text-align: center;
  font: bold 12px/20px Helvetia;
  color: red;}

Sedangkan untuk pemanggil HTML pada pembangun CSS diatas, Anda boleh kosongkan objeknya, atau mengganti objeknya dengan gambar atau lainnya, seperti ini

//..Tanpa Objek..//
<div class="ring-loading">
</div>

//..Objek Untuk Teks..//
<div class="ring-loading">
<p>SAHABAT BLOGGER 77</p>
</div>

//..Objek Untuk Gambar..//
<div class="ring-loading">
<img src="http://...URL-Gambar/sahabatblogger77.jpg/>
</div>

Pada dasarnya Bentuk elemen CSS seperti apa yang akan Anda rangkai, cukup fokus pada target objek yang akan Anda jadikan sebagai percobaan, misalnya jika Anda ingin membuat efek pada sebuah teks namun CSS yang terbentuk mengarah pada pengaturan objek gambar, maka efek tidak akan pernah tercipta. Saya berbagi tutorial ini kepada sahabat semua hanya sebatas pemahaman saja dalam tahap Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi, jika ada yang kurang dimengerti mari kita diskusikan bersama pada kolom komentar.

Terimakasih dan semoga artikel ini dapat membuat Anda menemukan efek-efek baru dengan model desain Anda sendiri. GOOD LUCK!