├── app.js
├── index.html
└── style.css
/app.js:
--------------------------------------------------------------------------------
1 | // 1. Select Elements
2 | let search = document.querySelector(".search");
3 | let close = document.querySelector(".close");
4 | let searchWrapper = document.querySelector(".search-wrapper");
5 |
6 | // 2. Attach Events
7 | search.addEventListener("click", () => {
8 | searchWrapper.classList.add("active");
9 | });
10 |
11 | close.addEventListener("click", () => {
12 | searchWrapper.classList.remove("active");
13 | });
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Animated Search Box
7 |
8 |
9 |
10 |
17 |
18 |
19 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: sans-serif;
6 | }
7 |
8 | body {
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | background: linear-gradient(to left, #21d4fd, #b721ff);
14 | }
15 |
16 | .search-wrapper {
17 | position: relative;
18 | width: 60px;
19 | height: 60px;
20 | background: #fff;
21 | display: flex;
22 | justify-content: space-between;
23 | overflow: hidden;
24 | box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
25 | transition: 0.4s;
26 | border-radius: 100px;
27 | }
28 |
29 | .search-wrapper .search {
30 | position: relative;
31 | min-width: 60px;
32 | height: 60px;
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 | font-size: 1.5rem;
37 | cursor: pointer;
38 | }
39 |
40 | .search-wrapper .search i {
41 | color: #111;
42 | font-size: 1.5rem;
43 | }
44 |
45 | .search-wrapper .close i {
46 | color: #555;
47 | font-size: 1.5rem;
48 | }
49 |
50 | .search-wrapper .close {
51 | position: relative;
52 | width: 60px;
53 | height: 60px;
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | cursor: pointer;
58 | transition: 0.5s;
59 | scale: 0;
60 | }
61 |
62 | .search-wrapper .searchInput {
63 | position: absolute;
64 | left: 60px;
65 | width: calc(100% - 120px);
66 | height: 100%;
67 | line-height: 60px;
68 | }
69 |
70 | .search-wrapper .searchInput input {
71 | position: absolute;
72 | width: 100%;
73 | height: 100%;
74 | border: none;
75 | outline: none;
76 | }
77 |
78 | /* JS classes */
79 | .search-wrapper.active {
80 | width: 360px;
81 | transition-delay: 0.3s;
82 | }
83 | .search-wrapper.active .close {
84 | scale: 1;
85 | transition-delay: 0.5s;
86 | }
87 |
--------------------------------------------------------------------------------