Cara menggunakan css animasi teks isi

Question

Placeholder dapat digunakan untuk meningkatkan pengalaman aplikasi Anda. Mereka dibuat hanya dengan HTML dan CSS, artinya Anda tidak memerlukan JavaScript apa pun untuk membuatnya. Namun, Anda memerlukan beberapa JavaScript khusus untuk mengalihkan visibilitasnya. Penampilan, warna, dan ukurannya dapat dengan mudah disesuaikan dengan kelas utilitas kami

Table of Contents Show

Bagaimana itu bekerja

Contoh

Pada contoh di bawah ini, kami mengambil komponen kartu biasa dan membuatnya kembali dengan placeholder yang diterapkan untuk membuat "memuat kartu". Ukuran dan proporsinya sama antara keduanya

Judul kartu

Beberapa teks contoh cepat untuk membuat judul kartu dan mengisi sebagian besar konten kartu


  

  

    
Card title
    Some quick example text to build on the card title and make up the bulk of the card's content.




    Go somewhere

Bagaimana itu bekerja

Buat placeholder dengan kelas .placeholder dan kelas kolom kisi (mis. g. , .col-6) untuk menyetel width. Mereka dapat mengganti teks di dalam elemen atau ditambahkan sebagai kelas pengubah ke komponen yang sudah ada

Kami menerapkan gaya tambahan pada

_0 melalui

1 untuk memastikan

2 dihormati. Anda dapat memperluas pola ini untuk situasi lain sesuai kebutuhan, atau menambahkan

3 di dalam elemen untuk mencerminkan ketinggian saat teks sebenarnya dirender di tempatnya

_

Penggunaan

_4 hanya menunjukkan bahwa elemen harus disembunyikan dari pembaca layar. Perilaku memuat placeholder tergantung pada bagaimana penulis akan benar-benar menggunakan gaya placeholder, bagaimana mereka berencana memperbarui sesuatu, dll. Beberapa kode JavaScript mungkin diperlukan untuk menukar status placeholder dan memberi tahu pengguna AT tentang pembaruan tersebut

Lebar

Anda dapat mengubah width_ melalui kelas kolom kisi, utilitas lebar, atau gaya sebaris

Warna

Secara default,

_6 menggunakan

7. Ini dapat diganti dengan warna khusus atau kelas utilitas

Perekat

Ukuran .placeholder_ didasarkan pada gaya tipografi elemen induk. Sesuaikan dengan pengubah ukuran.

_9,

0, atau

1

Animasi

Menganimasikan placeholder dengan

_2 atau

3 untuk menyampaikan persepsi dengan lebih baik tentang sesuatu yang dimuat secara aktif

Membuat Animasi Teks Berisi Air di CSS

14 September 2017 css 0 Komentar

Halo Selamat Sore, kali ini mimin mau buat tutorial cara membuat animasi teks dengan efek seperti diisi air, menggunakan HTML dan CSS

Langkah pertama adalah membuat html sebagai berikut

<!DOCTYPE html><html><head>    <title>Text Filling With water</title>    <link rel="stylesheet" href="style.css"></head><body>    <div class="loader">        <h1>water</h1>    </div></body></html>

lalu buat cssnya seperti berikut

body {
margin: 0;
padding: 0;
background: #262626;
font-family: arial;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: 10em;
color: rgba(255,255,255,.1);
background-image: url("water.png");
background-repeat: repeat-x;
background-clip: text;
-webkit-background-clip: text;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
background-position: left 0px top 30px;
}
40% {
background-position: left 600px top -150px;
}
80% {
background-position: left 1200px top -150px;
}
100% {
background-position: left 1500px top 30px;
}
}

untuk background gambarnya silahkan unduh disini , bisa juga buat background air sendiri. jika anda membuat background air sendiri, atur posisi background pada keyframe animate diatas sesuai dengan ukuran gambar anda ok. Sekian tutorial kali ini, selamat mencoba, jika tutorial ini bermanfaat silahkan share ke teman-teman anda. Terima kasih telah mengunjungi blog ini.

Lihat Demo

kode css