好玩的search加载css

标签：css   search   

body{
           margin-top:50px;
        }
        .s-body
        {
            width:400px;
            margin-left:auto;margin-right:auto;
        }
        .s-input
        {
            border:1px solid #ccc;
            padding:2px 4px 2px 4px ;
            border-radius:3px;
            box-shadow:rgba(22,22,22,.1) 0px 1px 1px;
        }
        .s-input input
        {
            width:325px;
            border:0px solid #ccc;
            outline:none;
            height:25px;
            font-size:16px;
            
        }
        .s-input button
        {
            margin-top:-2px;
            margin-right:-4px;
            float:right;
            border-width:0px;
            outline:none;
            padding:9px 19px;
            line-height:100%;
            background-color:rgba(190,26,33,.7);
            color:#fff;
            letter-spacing: 1px;
            font-weight:bold;
        }
        .s-input.loding input
        {
            width:290px;
        }
        .s-input input:disabled
        {
            color:rgba(0,0,0,.7);
            background-color:#fff;
        }
        .s-input.loding button{
            background-color:rgba(190,26,33,.91);
            animation:stretchdelay 4s infinite ease-in-out;
            -webkit-animation:stretchdelay 4s infinite ease-in-out;
        }
        .s-input.loding button:before
        {
            content:"正在";
        }
        @-webkit-keyframes stretchdelay {
          50% { -webkit-transform: translateX(-300px) } 
          0% { -webkit-transform: translateX(0px) }
        }
        @keyframes stretchdelay {
            50%
            {
                transform:translateX(-300px);
                -webkit-transform:translateX(-300px);
            }
            0%
            {
                transform:translateX(0px);
                -webkit-transform:translateX(0px);
            }
        }
        .s-input button:hover
        {
            background-color:rgba(190,26,33,1);
            cursor:pointer;
        }

$(function () {
            $(".s-input button").click(function () {
                if ($(this).parent().hasClass("loding"))
                {
                    $(this).parent().removeClass("loding").children("input").prop("disabled", false).focus();
                } else
                {
                    $(this).parent().addClass("loding").children("input").prop("disabled", true);
                }

            });
        })

    <div class="s-body">
        <div class="s-input">
            <input type="text"/>
            <button type="button">搜索</button>
        </div>
    </div>

好玩的search加载css

标签：css   search   

原文地址：http://blog.csdn.net/qq6648208281/article/details/46459391