Membuat Animasi Search Bar Dengan HTML CSS - Kursus Web Design Private Online 1 on 1‎

Dalam sebuah website portal berita contohnya pasti sangat penting adanya input search pada halaman website, search disini tentu akan mempermudah dalam pencarian yang sesuai diketikkan atau inputan teks seorang pengguna atau user. Dalam kasus ini kita akan belajar membuat animasi search bar ,dengan tujuan agar menarik dalam tampilan serta mudah ditemukan. Bagaimana cara membuat animasi search bar yuuuk disimak langkah-langkahnya.Langkah-langkah pertama tentu siapkan terlebih dahulu struktur HTML nya seperti code dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Animasi Search Bar Dengan HTML CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
	<form>
		<input type="text" name="search" id="s-box" placeholder="mencari sesuatu....">
		<input type="submit" id="btn" class="btn-icons" value="send" name="button">
		<span id="line"></span>
	</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Membuat Animasi Search Bar Dengan HTML CSS</title>

</head>

<body>

<form>

</form>

</body>

</html>

sahabat bisa perhatikan dalam file html terdapat sebuah form didalamnya terdapat input type=text dan input type=submit. Pada input type=text saya meberikan id=s-box yang akan dipakai untuk memberikan style CSS, lalu pada input type=submit saya berikan class=material-icons untuk sebuah icons.

Langkah selanjutnya ini yang penting yaitu style CSS-nya silahkan ketikkan seperti code dibawah ini:

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
*{
	box-sizing: border-box;
	margin: 0;
	padding:0;
	outline: 0;
}
html,body{
	background: #5eb332;
	text-decoration: none;
	overflow: hidden;
}
form{
	position: absolute;
	width: 700px;
	height: 97px;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	margin: auto;
}
.btn-icons{
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 10vw;
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: sub;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'liga';
}

#s-box{
	position: relative;
	top:-18px; /*15px*/
	width: 547px;
	border:none;
	background: none;
	color:#fff;
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 40px;
}

#s-box:focus ~ #btn{
	color: #fff;
	text-indent: 5px;
	transition: .2s .4s;
}

#s-box:focus ~ #line{
	animation: line-anim .5s both;
}

#s-box:focus::-webkit-input-placeholder{
	text-indent:100%;
}

#s-box:focus::-moz-placeholder{
	text-align: right;
}

#btn{
	width: 95px;
	height: 95px;
	background: #5eb332;
	color: transparent;
	font-size: 48px;
	text-indent: -100%;
	vertical-align: middle;
	border:10px solid #ffff0b;
	border-radius: 50%;
}

#btn:focus{
	text-indent: 5px;
	color:#fff;
	animation: btn-focus-anim .2s both;
}

#line{
	position: absolute;
	top:0;
	bottom: 0;
	right: 102px;
	margin:auto;
	width: 100px;
	height: 0;
	background: #fff;
	border:3px solid #ffff0b;
	border-radius: 3px;
	border-top-right-radius: 0;
	transform: rotate(-35deg);
	transform-origin:right ;
	z-index: -1;
}

::-webkit-input-placeholder{
	color:#fff;
	opacity: .5;
	transition: .2s;
}

::-moz-placeholder{
	color:#fff;
	opacity: .5;
	transition: .2s;
}

@keyframes line-anim{
	0%{
		width:130px;
		transform:rotate(0);
	}
	100%{
		width:599px;
		transform: rotate(0);
	}
}


@keyframes btn-focus-anim{
	0%{
		box-shadow: 0 0 0 85px blueviolet;
	}
	100%{
		box-shadow: 0 0 0 100px blueviolet;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

box-sizing: border-box;

margin: 0;

padding:0;

outline: 0;

}

html,body{

background: #5eb332;

text-decoration: none;

overflow: hidden;

}

form{

position: absolute;

width: 700px;

height: 97px;

top:0;

bottom: 0;

left:0;

right: 0;

margin: auto;

}

.btn-icons{

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: 10vw;

display: inline-block;

width: 1em;

height: 1em;

line-height: 1;

text-transform: none;

letter-spacing: normal;

white-space: nowrap;

direction: ltr;

vertical-align: sub;

text-rendering: optimizeLegibility;

font-feature-settings: 'liga';

}

#s-box{

position: relative;

top:-18px; /*15px*/

width: 547px;

border:none;

background: none;

color:#fff;

font-family: sans-serif;

text-transform: uppercase;

font-size: 40px;

}

#s-box:focus ~ #btn{

color: #fff;

text-indent: 5px;

transition: .2s .4s;

}

#s-box:focus ~ #line{

animation: line-anim .5s both;

}

#s-box:focus::-webkit-input-placeholder{

text-indent:100%;

}

#s-box:focus::-moz-placeholder{

text-align: right;

}

#btn{

width: 95px;

height: 95px;

background: #5eb332;

color: transparent;

font-size: 48px;

text-indent: -100%;

vertical-align: middle;

border:10px solid #ffff0b;

border-radius: 50%;

}

#btn:focus{

text-indent: 5px;

color:#fff;

animation: btn-focus-anim .2s both;

}

#line{

position: absolute;

top:0;

bottom: 0;

right: 102px;

margin:auto;

width: 100px;

height: 0;

background: #fff;

border:3px solid #ffff0b;

border-radius: 3px;

border-top-right-radius: 0;

transform: rotate(-35deg);

transform-origin:right ;

z-index: -1;

}

::-webkit-input-placeholder{

color:#fff;

opacity: .5;

transition: .2s;

}

::-moz-placeholder{

color:#fff;

opacity: .5;

transition: .2s;

}

@keyframes line-anim{

0%{

width:130px;

transform:rotate(0);

}

100%{

width:599px;

transform: rotate(0);

}

@keyframes btn-focus-anim{

0%{

box-shadow: 0 0 0 85px blueviolet;

}

100%{

box-shadow: 0 0 0 100px blueviolet;

}

bisa dilihat line pertama pada code CSS diatas saya menggunakan import sebuah link untuk Icon yang dipakai, lihat kembali pada input type=submit yang terdapat di file HTML.

Pada pengaturan css ini saya memberikan banyak pengaturan seperti posisi ,efek transition dan property lainnya yang sahabat bisa cari sendiri fungsi dari property yang saya gunakan.

emudian saya membuat sebuah focus selector yaitu ketika inputannya sedang aktif, saya mengatur kembali lebar line maupun menampilkan icon ya, jika sudah silahkan sahabat save, lalu coba jalankan pada browser masing-masing, jika benar maka hasilnya akan seperti berikut ini:

Lalu coba klik pada form inputnya maka akan terlihat animasinya seperti tampilan dibawah ini:

saya kira cukup pembahasan kali ini tentang cara membuat animasi search bar dengan html css, semoga bermanfaat dan sampai jumpa pada pembahasan lainnya.

terima kasih

Facebook DUMET School

Categories