css实现简洁搜索按钮悬浮展开搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:css实现简洁搜索按钮悬浮展开搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { margin: 0; background: #000000; display: grid; place-items: center; } .wrapper { text-align: center; width: 230px; } .search { display: inline-flex; padding: 5px; border-radius: 50px; transition: 0.4s; } .search:hover { background: rgba(255, 255, 255, 0.15); } .search:hover input { max-width: 180px; } .search input { background: transparent; border: 0; max-width: 0; padding: 0; text-indent: 12px; color: #f9f9f9; font-size: 22px; font-family: "Poppins"; outline: none; transition: 0.4s; } .search input::placeholder { color.........完整代码请登录后点击上方下载按钮下载查看
网友评论0