Tutorial Membuat Animasi Blink Blik Pada Tulisan dengan CSS

Pagi EveryBody,

Kali ini admin akan membagikan syntax css untuk membuat animasi blink-blink atau kerlap kerlip pada web kita, berikut syntax animasin nya 


@keyframes blinker { 

 
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

.num {
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    font-size: 50px;
    color: red;
}


Setelah anda membuat class di css, silahkan gunakan class pada tag html anda, dan selesai

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

.transisi {
    animation: 3s ease-out 0s 1 slideInFromLeft;
}

//jumbroton
.jumbotron {
    background-image: url('../img/bgbg.jpg');
    text-align: center;
    height: 640px;
    position: relative;
}

.jumbotron .container {
    position: relative;
    z-index: 1;
}

.jumbotron::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgb(255, 143, 143), rgba(0, 0, 0, 0));
    position: absolute;
    bottom: 0;
}

Comments

Post a Comment

Popular posts from this blog

Simple Fetch API Menggunakan Javascript

      Assalamu'alaikum, wr.wb, jumpa lagi bersama admin pada postingan ini, kali ini admin akan share fetch API secara simple menggunakan Javascript, tidak panjang cerita langsung kita eksekusi. Langkah Pertama siapkan 2 file, index.html dan app.js app.js async   function   getUsers () {      let   url  =  'your-url' ;      try  {          let   res  =  await   fetch ( url );          return   await   res . json ();     }  catch  ( error ) {          console . log ( error );     } } async   function   renderUsers () {      let   users  =  await   getUsers ();      let   html  =  '' ;    ...
Read more

RestApi Post

 Assalamu'alaikum wr, wb.     Hai everybody, jumpa mimin skscode lagi nih di materi simple RestApi menggunakan laravel 8, inget loh laravel 8 ini banyak magic nya, tanpa panjang lebar dan basa basi lagi langsung saja kita ke tutorial, langkah pertama, siapkan project nya terlebih dahulu. Yang kedua bkin file migration berserta model nya, dan jangan lupa create controller crud dan resource nya juga. kalo semua sudah siap tinggak kita eksekusi di bagian route/api.php nya saja, untuk contoh coding nya bisa lihat di bawah ini : <?php use  App\Models\ yayan ; use  Illuminate\Http\ Request ; use  Illuminate\Support\Facades\ Route ; /* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are...
Read more