Membuat Morphing Effect Text Menggunakan CSS – Pada artikel ini kita akan membahas bagaimana membuat morphing effect text menggunakan CSS. Pada tutorial ini kita akan membuat dua buah file yaitu index.html dan style.css. Simak artikel ini lebih lanjut untuk membuat morphing effect text menggunakan CSS.
Daftar Isi
Kode pada file style.css
*{
margin: 0;
padding: 0;
box-sizing: inherit;
}
body{
font-family: cursive;
}
.container{
position: relative;
height: 100vh;
width: 100%;
background: rgb(0, 0, 0);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.word{
max-width: 100%;
letter-spacing: 8px;
font-size: 8rem;
position: absolute;
color: blue;
animation: word 5s infinite ease-in-out;
}
.word:nth-child(1){
animation-delay: -9s;
}
.word:nth-child(2){
animation-delay: -7s;
}
.word:nth-child(3){
animation-delay: -5s;
}
@keyframes word {
0%, 5%, 100%{
filter: blur(0px);
opacity: 1;
}
20%, 80%{
filter: blur(35px);
opacity: 0;
}
}
Kode pada file index.html
<!DOCTYPE html>
<html>
<head>
<TITLE>Morphing Effect in Text</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="word">Welcome</div>
<div class="word">to</div>
<div class="word">Inpows</div>
</div>
</body>
</html>
Temukan source code HTML dan CSS keren lainnya hanya di Inpows.
Baca Juga
Membuat Icon Pulse Animation Menggunakan HTML dan CSS
Membuat Algoritma Insertion Sort di Kotlin
Membuat Algoritma Bubble Sort di Kotlin