CSS-анимация раскрытия поисковой панели при наведении
See the Pen CSS only slide out search bar by Ryan Arthur (@arthurra) on CodePen.
HTML
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CSS only slide out search bar</title><link href='https://fonts.googleapis.com/css?family=Scada:400,700' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Cabin:400,500,600,700' rel='stylesheet' type='text/css'><link href='http://homepages.uc.edu/~arthurra/resource/font-awesome/font-awesome.css' rel='stylesheet'><link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'><link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><html><body><div class='container' tabindex='1'><div class='search-container' tabindex='1'><input placeholder='search' type='text'><a class='button'><i class='fa fa-search'></i></a></div></div></body></html><!-- partial --></body></html>
CSS
* {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;font-family: "Cabin";}html {height: 100%;}body {height: 100%;background: #FDF6E3;}.container {display: block;max-width: 900px;margin: auto;padding: 100px;height: 100%;outline: none;}.search-container {overflow: hidden;float: right;height: 4em;width: 4em;border-radius: 2em;box-shadow: 0 0 5px #6A5D4F;-moz-transition: all 0.35s;-webkit-transition: all 0.35s;}.search-container:hover, .search-container:focus, .search-container:focus-within {width: 25em;border-radius: 5px 2em 2em 5px;outline: none;}.search-container:hover input, .search-container:focus input, .search-container:focus-within input {display: inline-block;width: 19em;padding: 10px;}input {-moz-appearance: none;-webkit-appearance: none;appearance: none;float: left;width: 0em;height: 2em;margin: 1em;margin-right: -4.5em;background: #fff;color: #6A5D4F;font-size: 1em;font-weight: 600;padding: 0px;border: 0;border-radius: 5px;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) inset;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);-moz-transition: all 0.25s;-webkit-transition: all 0.25s;}input:focus {outline: none;box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25), 0 1px 5px rgba(0, 0, 0, 0.15);}.button {display: flex;align-items: center;justify-content: center;float: right;width: 1.75em;height: 1.75em;margin: 0.125em;background: #6A5D4F;text-align: center;font-size: 2em;color: #FDF6E3;border-radius: 50%;box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.25);text-shadow: 0 -2px 1px rgba(0, 0, 0, 0.3);}.button:active {border: 0 !important;text-shadow: 0 0 0;}.button i {font-size: 85%;}
css-only-slide-out-search-bar.zip
0
7.2 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!