我非常喜欢这个网站上的搜索栏https://www.marmosetmusic.com/
我基本上可以使用CSS步骤动画来完成它,但它看起来并不平滑,我必须根据占位符的长度更改时间。
另外,我不知道如何在图像或视差设计上叠加它。
我试过的是:
HTML:
<title>Search</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<h1>
<i class='fa fa-anchor'></i>
Test.com
</h1>
<div class='overlay'></div>
<div class='wrapper'>
<form class='search'>
<input placeholder="search..." required='true' type='text'>
<button class='search-button'>
<i class='fa fa-search'></i>
</button>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS:
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
body {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
background-position: 0 90%;
overflow: hidden;
}
body, html {
height: 100%;
}
h1 {
color: #fff;
font-size: 3.5em;
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
padding: 20px;
font-weight: 300;
opacity: 1;
}
h1 i {
color: #e74c3c;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: #000;
opacity: 0.92;
top: 0;
left: 0;
}
.wrapper {
width: 560px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -20px;
-webkit-font-smoothing: antialiased;
z-index: 999999;
}
input[type="text"] {
font-family: 'Alegreya Sans SC', sans-serif;
width: 480px;
height: 40px;
padding: 10px 0 10px 20px;
font-size: 24px;
font-weight: 300;
color: #eee;
background: #222;
border: none;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
input:focus {
color: #fff;
outline: none;
background: #1a1a1a;
}
button[type="submit"], .search-button {
border: 0;
width: 60px;
height: 60px;
background: #222222;
border-left: solid 5px #222222;
text-align: center;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
button[type="submit"] i, .search-button i {
color: #fff;
font-size: 40px;
line-height: 1.4em;
}
.search-button:focus {
outline: none;
}
.search-button:hover {
background: #e53f2e;
border-left: #e53f2e;
}
.switch-wrapper {
font-family: 'Alegreya Sans SC', sans-serif;
width: 70px;
height: 40px;
margin: 10px;
border-radius: 40px;
position: absolute;
background: #444;
right: 118px;
cursor: pointer;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper:before {
position: absolute;
content: 'FLIGHT';
line-height: 2.7em;
left: -54px;
}
.switch-wrapper:after {
position: absolute;
content: '+ HOTEL';
line-height: 2.7em;
right: -60px;
}
.switch-wrapper .switch {
width: 36px;
height: 36px;
margin: 2px 2px;
background: #222;
border-radius: 50%;
position: absolute;
}
.switch-wrapper .switch:hover {
background: #282828;
}
.rent {
position: absolute;
left: 30px;
}
.switch-wrapper.switched:after {
color: #3498db;
text-shadow: 0 0 4px #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.switched:before {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:after {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:before {
color: #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.not-valid {
display: none;
width: 100%;
height: 30px;
background: #e74c3c;
position: absolute;
opacity: 1;
top: 70px;
}
.not-valid span {
font-family: 'Alegreya Sans SC', sans-serif;
color: #fff;
padding: 10px;
line-height: 1.96em;
}
.not-valid span i {
padding-right: 4px;
}
.not-valid span .error-close {
color: #7b190f;
float: right;
padding: 7px 10px 0 0;
cursor: pointer;
}
label.error {
display: none !important;
}
JS
var s = $('.switch');
var sw = $('.switch-wrapper');
$('input').on('click', function(a) {
a.preventDefault();
});
function switchToggle() {
s.stop(false,true).animate({left: "0"}, 200);
}
s.on('click', function() {
if (sw.hasClass('switched')) {
switchToggle();
} else if (sw.hasClass('not-switched')) {
s.stop(false,true).animate({left: "30px"}, 200);
}
sw.toggleClass('switched not-switched');
});
$('.search').validate({
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("div.not-valid span").html("<i class='fa fa-warning'></i> Please type search <i class='fa fa-times error-close'></i>");
// Should use .stop() function.
$(".not-valid").fadeIn();
setTimeout(function() {
$(".not-valid").fadeOut();
}, 2000);
$('.error-close').on('click', function() {
$(".not-valid").fadeOut();
});
} else {
$(".not-valid").fadeOut();
}
}
});
在this jsfiddle演示中找到了所有内容。 任何帮助将不胜感激!
答案 0 :(得分:2)
以下是一个简单示例,说明如何以与示例中所示类似的方式设置搜索字段的样式。 display: flex
在这里完成大部分魔术,其余的是摆脱背景和边框或使用图像设置提交按钮
对于打字动画,你应该使用预制插件,如typed.js
.search {
background: rgba(0, 0, 0, 0.1);
display: flex;
}
.search input {
border: 0px;
margin: 0px;
padding: 0px;
}
.search input[type="text"] {
flex: 1;
background: transparent;
font-size: 2em;
}
.search input[type="submit"] {
font-size: 2em;
margin: 4px;
width: 1em;
height: 1em;
cursor: pointer;
background-color: transparent;
background-image: url(https://cdn0.iconfinder.com/data/icons/basic-lines/39/search-512.png);
background-size: cover;
}
.search input:focus {
outline: none;
}
<div class="search">
<input type="text" name="search">
<input type="submit" value="">
</div>