Membuat Animasi Search dengan HTML dan CSS
Berbicara mengenai desain memang tak ada habisnya, semakin berkembangnya teknologi semakin berkembang pun desain terutama desain web, nah kali ini saya akan menshare bagai mana cara Merancang Animasi Search dengan HTML dan CSS,
bikin index. html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title> Search </title>
</head>
<body>
<div id=container>
<form action=>
<input id=search type=text placeholder=Apa yang sahabat Cari ?>
<input value= type=submit>
</form>
</div>
</body>
</html>
berikut css nya.
@import url('https://fonts.googleapis.com/css?family=Dosis');
body {
background: #fff;
}
#container {
margin: 50px 100px;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type=text] {
font-family: 'Dosis', sans-serif;
height: 75px;
font-size: 50px;
border: none;
color: #434B4E;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 9;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type=text]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type=submit] {
height: 100px;
width: 100px;
border: none;
background: url('search.png') center center no-repeat;
}
input[type=submit]:hover {
opacity: 0.8;
}berikut tampilannya.
seperti itu kita klik bagian tombol search karenanya akan muncul tulisan Apa yang sahabat cari?.
sekianlah panduan Merancang Animasi Search dengan HTML dan CSS, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
