Cara Membuat Text Animations Dengan CSS � untuk mendesain sebuah blog memang erat kaitannya dengan style CSS karena paling tidak sebelum menerapkan ke dalam elemen tertentu pada blog terlebih dahulu wajib kita ketahui dasarnya dahulu agar lebih mudah nantinya pada waktu akan mendeklarasikan kedalam sebuah template. Pada tutorial ini akan saya bahas sedikit mengenai tata cara agar dapat membuat sebuah text animasi yang tidak luput menggunakan fungsi CSS untuk memaksimalkan maupun melengkapi dari apa yang sudah pernah di bahas pada artikel artikel sebelumnya dalam penggunaan CSS. Ini nanti bisa di kembangkan untuk melengkapi sedikit keperluan blog dimana tergantung dari keinginan untuk menerapkannya, misal ingin di gunakan untuk title blog pada tag header maupun lainnya. Agar lebih mudah, dibawah terdapat coding beserta demonya silahkan di lihat dan di pahami mungkin nanti dapat menjadi inspirasi untuk apa dan digunakan bagaimana dalam upaya penerapannya langkah memanipulasi template blog. Berikut tutorialnya Cara Membuat Text Animations Dengan CSS.Pertama untuk membuat teks glow, misal ingin membuat teks menjadi lebih menyala dan berkedip maka kodenya seperti dibawah ini.
Ini kode CSS untuk Membuat Text Animations
.textglow{ text-align:center; font-size:30px; color:#fff; animation:blur .75s ease-out infinite; text-shadow:0px 0px 5px #fff, 0px 0px 7px #fff; }
@keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;} }Ini kode HTML untuk Membuat Text Animations
<div class="textglow">
mas-andes.blogspot.com
</div>
Hasilnya seperti dibawah ini
mas-andes.blogspot.com
Contoh lain untuk membuat efek pada teks agar seakan-akan seperti bergelombang.
Ini kode CSS untuk Membuat Text Animations
.textmetalic { text-align: center; font-size: 30px; color: transparent; letter-spacing: -3px;}
.textmetalic span { text-shadow: 0 0 2px rgba(204, 208, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { to { text-shadow: 0 0 2px rgba(204, 208, 212,0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} }
.textmetalic span:nth-child(2) { animation-delay:0.2s; }
.textmetalic span:nth-child(3) { animation-delay:0.4s; }
.textmetalic span:nth-child(4) { animation-delay:0.6s; }
.textmetalic span:nth-child(5) { animation-delay:0.8s; }
.textmetalic span:nth-child(6) { animation-delay:1s; }
.textmetalic span:nth-child(7) { animation-delay:1.2s; }Ini kode HTML untuk Membuat Text Animations
<div class="textmetalic">
<span>m</span> <span>a</span> <span>s</span> <span>-</span> <span>a</span> <span>n</span> <span>d</span> <span>e</span> <span>s</span> <span>.</span> <span>b</span> <span>l</span> <span>o</span> <span>g</span> <span>s</span> <span>p</span> <span>o</span> <span>t</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span>
</div>
Hasilnya seperti dibawah ini
Yang ini untuk membuat teks agar bisa bergerak.
Ini kode CSS untuk Membuat Text Animations
@yellow: #ebb221;
@shadow-for-yellow: #F35747;
@blue: #90f0d2;
@shadow-for-blue: #3988a6;
.textsway { color: #fff; font-size: 20px; width: 320px; margin: 10px auto; text-align: center; }
.bigger {
display: block; margin-bottom: .25em; font-size: 30px; color: @yellow; text-shadow: 1px 1px 0 fade(@shadow-for-yellow, 100%), 2px 2px 0 fade(@shadow-for-yellow, 90%), 3px 3px 0 fade(@shadow-for-yellow, 80%), 4px 4px 0 fade(@shadow-for-yellow, 70%), 5px 5px 0 fade(@shadow-for-yellow, 60%), 6px 6px 0 fade(@shadow-for-yellow, 50%), 7px 7px 0 fade(@shadow-for-yellow, 40%), 8px 8px 0 fade(@shadow-for-yellow, 30%), 9px 9px 0 fade(@shadow-for-yellow, 20%), 10px 10px 0 fade(@shadow-for-yellow, 10%); animation: jumptext 1s steps(8, start) infinite; transition: all .2s ease;
&:hover { animation: none; letter-spacing: normal; }
}
.regular { display: block; }
.regular + .regular { animation-delay: .5s; }
.buzz {
display: inline-block; text-shadow: 2px 0 0 fade(#fff, 30%), -2px 0 0 fade(#fff, 30%); animation: buzz .04s linear infinite alternate; transition: all .2s ease;
&:hover { animation: none; text-shadow: none; }
}
@keyframes jumptext {
0% { transform: rotate(-5deg); letter-spacing: normal; }
50% { transform: rotate(5deg); color: @blue; letter-spacing: 0.1em; text-shadow: 1px 1px 0 fade(@shadow-for-blue, 100%), 2px 2px 0 fade(@shadow-for-blue, 80%), 3px 3px 0 fade(@shadow-for-blue, 60%), 4px 4px 0 fade(@shadow-for-blue, 40%), 5px 5px 0 fade(@shadow-for-blue, 20%); }
100% { transform: rotate(-5deg); color: @yellow; letter-spacing: normal; }
}
@keyframes text-flasher {
0% { }
50% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
60% { text-shadow: 0 0 2px #000, 0 0 10px fade(#fff, 50%); }
100% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
}
@keyframes buzz {
0% { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}
Ini kode HTML untuk Membuat Text Animations
<div class="textsway">
<span class="bigger">mas-andes.blogspot.com</span>
<span class="buzz">Portal Blogger Tutorial</span>
</div>
Hasilnya seperti dibawah ini
mas-andes.blogspot.comPortal Blogger Tutorial
Sedikit mengambil contoh dari yang pertama, misalkan saja ingin di fungsikan pada button dengan menggunakan CSS transition untuk membuat efek hover. Berikut contoh sederhananya:
Ini kode CSS untuk Membuat Button Animations
@keyframes glow {
0% { box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); border-color: rgba(0,0,255,0.5); }
100% { box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0); border-color: rgba(0,0,255,1.0); }
}
#animasibutton { width:100px; margin:10px auto; }
#animasibutton button { width: 100px; padding: 5px; background: #cde; border: 2px solid #ccc; border-color: rgba(0,0,255,0.5); font-size:18px; color: #000; text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px; text-align: center; box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); }
#animasibutton button:hover, #animasibutton button.hover_effect { background-color:#cce; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }Ini kode HTML untuk Membuat Button Animations
<div class="animasibutton">
<button> Button </button>
</div>
Hasilnya seperti dibawah ini
Memang masih sedikit terbatas jika hanya menggunakan fungsi CSS untuk membuat text animations. Jika ingin lebih banyak efek yang digunakan kita bisa memaksimalkannya lagi dengan tambahan jQuery.
Demikian artikel tentang Cara Membuat Text Animations Dengan CSS ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Text Animations Dengan CSS ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
