美文网首页
搜索内容为空时,搜索框高亮两次

搜索内容为空时,搜索框高亮两次

作者: zZ_d205 | 来源:发表于2020-06-12 18:06 被阅读0次

    模仿天猫搜索框样式:https://www.tmall.com/?ali_trackid=2:mm_26632258_3504122_120444633:1591956379_137_861711988&clk1=0caa75d4217c7d3ec14e9a0370e5763d&upsid=0caa75d4217c7d3ec14e9a0370e5763d

    <!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>

    相关文章

      网友评论

          本文标题:搜索内容为空时,搜索框高亮两次

          本文链接:https://www.haomeiwen.com/subject/vkentktx.html