7가지 순수 CSS3 검색창 UI 디자인 효과

간단한 튜토리얼

CSS3를 이용하여 만든 검색창 UI 디자인 효과입니다. 이 검색창의 디자인 코드는 간단하고 디자인 스타일은 주로 플랫 스타일이며 효과는 패셔너블하고 관대합니다.

사용법

HTML 구조

모든 검색창의 HTML 구조는 폼에 입력버튼과 제출버튼을 배치하는 것입니다.

<form>
  <input type="text" placeholder="搜索从这里开始...">
  <button type="submit"></button>
</form>

CSS 스타일

다양한 검색창의 CSS 코드는 검색창의 첫 번째 효과와 같이 매우 간단합니다. 간단한 포지셔닝 .

.d1 {background: #A3D0C3;}
.d1 input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}
.d1 button {
  position: absolute; 
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

그 외 다양한 효과를 포함한 검색창 구현코드는 다운로드 파일을 참고해주세요.

위 내용은 순수 CSS3 검색창 UI 디자인 효과 7가지 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!