ఎలా సృష్టించాలి: అనిమేషన్ సోర్చ్ బాక్స్

CSS ద్వారా అనిమేషన్ సోర్చ్ ఫారమ్ సృష్టించడానికి తెలుసుకోండి.

ఇన్‌పుట్ ఫీల్డ్ నొక్కండి:

అనిమేషన్ సోర్చ్ బాక్స్ నిర్మించండి ఎలా?

మొదటి చర్య - హ్ట్మ్ఎల్ జోడించండి:

<input type="text" name="search" placeholder="శోధించు..">

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

input[type=text] {
  వెడల్పు: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  ట్రాన్సిషన్: వెడల్పు 0.4s ఇజ్ ఇన్ అవుట్;
}
/* ఇన్‌పుట్ ఫీల్డ్ ఫోకస్ పొందినప్పుడు, దాని వెడల్పును 100% చేయండి */
input[type=text]:focus {
  వీడియు: 100%;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单