念念不忘
必有回响

B站网页特效学习 — 好看的搜索框

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

演示效果:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Awesome search Box</title> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; background: #e84118; } .search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2f3640; height: 40px; border-radius: 40px; padding: 10px; } .search-btn { color: #e84118; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; text-decoration: none; } .search-txt { border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0; } .search-box:hover > .search-txt { width: 240px; padding: 0 6px; } .search-box:hover > .search-btn { background: white; } </style> </head> <body> <div class="search-box"> <input class="search-txt" type="text" placeholder="Type to search" /> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> </div> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 好看的搜索框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址