<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索框
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
.inpu{
width:200px;
height:200px;
background:red;
}
.active{
position:relative;
animation:mymove 5s ease-in-out 0s 1 alternate forwards;
-moz-animation:mymove 5s ease-in-out 0s 1 alternate forwards; /* Firefox */
-webkit-animation:'mymove' 5s ease-in-out 0s 1 alternate forwards ; /* Safari and Chrome */
/*-webkit-animation:'index' 5s ease-in-out 0s 1 alternate forwards;*/
-o-animation:mymove 5s ease-in-out 0s 1 alternate forwards; /* Opera */
}
@keyframes mymove
{
0% {background:white;}
25% {background:orange;}
50% {background:white;}
75% {background:orange;}
100% {background:white;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {background:white;}
25% {background:orange;}
50% {background:white;}
75% {background:orange;}
100% {background:white;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {background:white;}
25% {background:orange;}
50% {background:white;}
75% {background:orange;}
100% {background:white;}
}
@-o-keyframes mymove /* Opera */
{
0% {background:white;}
25% {background:orange;}
50% {background:white;}
75% {background:orange;}
100% {background:white;}
}
<div class="inpu">
<form name='form2' id=form1 method='post' action='http://www.baidu.com'>
<input type="text" id="name" placeholder="请输入">
<input type=button onclick='btnclick()' name='n' value='提交'>
function btnclick(){
console.log($("#name").val());
if (!$("#name").val()){
$("#name").addClass("active")
setTimeout(function () {
$("#name").removeClass("active")
},5000)
}
// form2.submit();
}
</html>
网友评论