18.5.14
11
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.

CSS Pseudo Element image

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!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengenal Bentuk Elemen CSS Pseudo Animasi Dan Transisi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

11 komentar

  1. Kalo udah mampir di blognya Mbak Devy ini jadi makin betah berlama-lama, selalu ada postingan yang menarik perhatian saya... Baeusan liat demonya keren banget mbak jadi kayak animasi gitu ya padahal cuma pake CSS bukan software animasi. Ternyata banyak hal yang bisa dilakukan oleh CSS ini ya :)

    BalasHapus
    Balasan
    1. hmmm...jangan terlalu memuji gitu mas,buat saya mau artikel atau pembahasan baru semua bermanfaat dan berkualitas kok,,saya hanya berbagi sedikit saja, sehingga selebihnya bisa dikembangkan oleh sahabat semua para blogger indonesia.
      hehe..

      Hapus
  2. Weh mantap sekai,nice

    BalasHapus
  3. wih... kok bisa muter muter gitu yia, canggih banget nih, hmm......

    BalasHapus
  4. mbaknya kok pinter banget ya koding kayak gini,jadi ngiriiiiiiiii huwaaaaaaaaaaaaa \(>O<)/
    makasih ya mbak ilmunya :)

    BalasHapus
  5. CSS oh CSS bikin ane gregetan buat pelajarin hehe :D

    Cerita Dewasa

    BalasHapus
  6. selalu ada hal baru yang bisa saya dapatkan ketika mampir di sini,,,,

    BalasHapus
    Balasan
    1. terimakasih mas, semoga apa yang saya sampaikan dapat memberikan manfaat..

      Hapus
  7. Sudah saya coba mbak dan tampilannya bagus terima kasih ya :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK