带有输入的 CSS HTML 动画

Question

我正在开发一个网站，想对它进行动画搜索......我真的很喜欢这个动画：https://videohive.net/item/search-logo-reveal/19279469?s_rank=149我想知道我有什么办法可以做到。我的代码在这里：https://jsfiddle.net/4txmdqhx/有一些优化错误，因为我仍在开始。

谢谢！

Answer 1

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});
$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});

<style>
.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}
.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>

Answer 2

试试这样

.searchbar{
width: 200px;
height: 24px;
animation-name: searchbar;
animation-duration: 5s;
}   
@keyframes searchbar{
0%{width: 0px;}
20%{width: 40px;}
40%{width: 80px;}
60%{width: 120px;}
80%{width: 160px;}
100%{width: 200px;}
 }

您可以根据需要以及高度和动画持续时间调整宽度。

<form>     
<input   class="searchbar" 
type="text" value="enter text here">
</form>
</div>

Answer 3

试试这个，包含边框你可以根据你改变颜色

.searchbar{
width: 200px;
height: 24px;
animation-name: searchbar;
animation-duration: 5s;
border: 2px solid;
}   
@keyframes searchbar{
0%{width: 0px;
border-top-color: green;}
20%{width: 40px;
 border-right-color: red;}
40%{width: 80px; 
border-bottom-color: gold;}
60%{width: 120px; 
border-left-color: blue;}
80%{width: 160px; 
 border-top-color: pink;}
100%{width: 200px;}
 }

而这，

<input   class="searchbar" 
type="text" value="enter text here">
</form>