Code Hiệu Ứng Hộp Search Tìm Kiếm Đẹp Cho Blogspot

0 Share Share Share Send by Email Copy URL

Demo

Đầu tiền Chèn đoạn code hiển thị khung search dưới đây:

 <label class="input-container closed">
	<div class="shadow"></div>
	<div class="center">
		<input type="text" class="input" placeholder="Search">
	</div>
	<div class="sticks"></div>
</label>


    <script>
      document.querySelector('.sticks').addEventListener('click', function (e) {
	e.stopPropagation();
	e.preventDefault();
	//document.querySelector('.input').value = '';
	document.querySelector('.input-container').blur();
});
      //# sourceURL=pen.js
    </script>

Tiếp đến là chèn đoạn css nữa là xong:

body {
  --height: 50;
  --width: 300;
  --border: 5;
  --speed: 0.4;
  --ease: cubic-bezier(.85,.01,.4,.97);
  --color-bk: #6CD4FF;
  background: var(--color-bk);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background;
  transition-duration: calc(var(--speed) * 1s);
  transition-timing-function: var(--ease);
}
body:focus-within {
  --speed: 0.7;
  background-color: #63C1E8;
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-container {
  width: calc(var(--width) * 1px);
  height: calc(var(--height) * 1px);
  position: relative;
  cursor: pointer;
  -webkit-transform: rotate(12deg) scale(0.7);
          transform: rotate(12deg) scale(0.7);
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: calc(var(--speed) * 1s);
  transition-timing-function: var(--ease);
}
.input-container .center {
  border: calc(var(--border) * 1px) solid white;
  border-left: none;
  border-right: none;
  width: 100%;
  height: calc(100% - var(--border) * 2px);
  -webkit-transform: scalex(0);
          transform: scalex(0);
  transition: inherit;
  background-color: var(--color-bk);
}
.input-container input {
  transition: inherit;
  width: calc(100% - var(--height));
  height: 100%;
  border: 0;
  outline: 0;
  color: white;
  background: transparent;
  font-size: 1.3rem;
  opacity: 0;
  padding: 0;
  margin: 0;
}
.input-container .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2em;
  top: 0;
  left: 0;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.1);
  transition: inherit;
  -webkit-transform: scalex(0) translateY(-10px);
          transform: scalex(0) translateY(-10px);
  opacity: 0;
}
.input-container:after, .input-container:before {
  z-index: 1;
  content: '';
  transition: inherit;
  width: calc((var(--height) * 0.5px) - (var(--border) * 1px));
  height: calc((var(--height) * 1px) - (var(--border) * 2px));
  display: block;
  top: 0;
  border-color: white;
  position: absolute;
  background-color: var(--color-bk);
  border: calc(var(--border) * 1px) solid white;
}
.input-container:before {
  right: 100%;
  border-radius: 2em 0 0 2em;
  border-right: none;
  -webkit-transform: translateX(calc(var(--width) * 0.5px));
          transform: translateX(calc(var(--width) * 0.5px));
}
.input-container:after {
  left: 100%;
  border-radius: 0 2em 2em 0;
  border-left: none;
  -webkit-transform: translateX(calc(var(--width) * -0.5px));
          transform: translateX(calc(var(--width) * -0.5px));
}
.input-container .sticks {
  position: absolute;
  height: calc(var(--height) * 0.5px);
  width: 1px;
  bottom: 0;
  right: 0;
  transition: inherit;
  transition-duration: calc(var(--speed) * 1.15s);
  -webkit-transform: translateX(calc((var(--width) - var(--height)) * -0.53px)) rotate(-45deg);
          transform: translateX(calc((var(--width) - var(--height)) * -0.53px)) rotate(-45deg);
  z-index: 2;
}
.input-container .sticks:before, .input-container .sticks:after {
  transition: -webkit-transform calc(var(--speed) * 1s) var(--ease);
  transition: transform calc(var(--speed) * 1s) var(--ease);
  transition: transform calc(var(--speed) * 1s) var(--ease), -webkit-transform calc(var(--speed) * 1s) var(--ease);
  height: calc(var(--height) * 0.5px);
  width: calc(var(--border) * 1px);
  position: absolute;
  content: '';
  background-color: white;
  left: calc(var(--border) * -0.5px);
  bottom: calc(var(--height) * -0.25px);
}
.input-container:focus-within {
  -webkit-transform: rotate(0deg) translatey(-10px);
          transform: rotate(0deg) translatey(-10px);
}
.input-container:focus-within .center {
  -webkit-transform: scalex(1);
          transform: scalex(1);
}
.input-container:focus-within .shadow {
  -webkit-transform: scalex(1) translateY(0px);
          transform: scalex(1) translateY(0px);
  opacity: 1;
}
.input-container:focus-within input {
  opacity: 1;
}
.input-container:focus-within:before {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.input-container:focus-within:after {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.input-container:focus-within .sticks {
  transition-duration: calc(var(--speed) * 1s);
  -webkit-transform: translateX(calc(var(--height) * -0.1px)) translateY(0) rotate(180deg);
          transform: translateX(calc(var(--height) * -0.1px)) translateY(0) rotate(180deg);
}
.input-container:focus-within .sticks:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.input-container:focus-within .sticks:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}