精华内容
下载资源
问答
  • 【前端】纯CSS搜索框分享

    千次阅读 2018-04-17 14:46:16
    8款好看的CSS3搜索框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

    8款好看的CSS3搜索框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>8款纯CSS3搜索框</title>
    
        <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <style>
            * {
                box-sizing: border-box;
            }
    
            body {
                margin: 0;
                padding: 0;
                background: #494A5F;
                font-weight: 500;
                font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
            }
    
            #container {
                width: 500px;
                height: 820px;
                margin: 0 auto;
            }
            div.search {padding: 30px 0;}
    
            form {
                position: relative;
                width: 300px;
                margin: 0 auto;
            }
    
            input, button {
                border: none;
                outline: none;
            }
    
            input {
                width: 100%;
                height: 42px;
                padding-left: 13px;
            }
    
            button {
                height: 42px;
                width: 42px;
                cursor: pointer;
                position: absolute;
            }
    
            /*搜索框1*/
            .bar1 {background: #A3D0C3;}
            .bar1 input {
                border: 2px solid #7BA7AB;
                border-radius: 5px;
                background: #F9F0DA;
                color: #9E9C9C;
            }
            .bar1 button {
                top: 0;
                right: 0;
                background: #7BA7AB;
                border-radius: 0 5px 5px 0;
            }
            .bar1 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
    
            /*搜索框2*/
            .bar2 {background: #DABB52;}
            .bar2 input, .bar2 button {
                border-radius: 3px;
            }
            .bar2 input {
                background: #F9F0DA;
            }
            .bar2 button {
                height: 26px;
                width: 26px;
                top: 8px;
                right: 8px;
                background: #F15B42;
            }
            .bar2 button:before {
                content: "\f105";
                font-family: FontAwesome;
                color: #F9F0DA;
                font-size: 20px;
                font-weight: bold;
            }
    
            /*搜索框3*/
            .bar3 {background: #F9F0DA;}
            .bar3 form {background: #A3D0C3;}
            .bar3 input, .bar3 button {
                background: transparent;
            }
            .bar3 button {
                top: 0;
                right: 0;
            }
            .bar3 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
    
            /*搜索框4*/
            .bar4 {background: #F15B42;}
            .bar4 form {
                background: #F9F0DA;
                border-bottom: 2px solid #BE290E;
            }
            .bar4 input, .bar4 button {
                background: transparent;
            }
            .bar4 button {
                top: 0;
                right: 0;
            }
            .bar4 button:before {
                content: "\f178";
                font-family: FontAwesome;
                font-size: 20px;
                color: #be290e;
            }
    
            /*搜索框5*/
            .bar5 {background: #683B4D;}
            .bar5 input, .bar5 button {
                background: transparent;
            }
            .bar5 input {
                border: 2px solid #F9F0DA;
            }
            .bar5 button {
                top: 0;
                right: 0;
            }
            .bar5 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
            .bar5 input:focus {
                border-color: #311c24
            }
    
            /*搜索框6*/
            .bar6 {background: #F9F0DA;}
            .bar6 input {
                border: 2px solid #c5464a;
                border-radius: 5px;
                background: transparent;
                top: 0;
                right: 0;
            }
            .bar6 button {
                background: #c5464a;
                border-radius: 0 5px 5px 0;
                width: 60px;
                top: 0;
                right: 0;
            }
            .bar6 button:before {
                content: "搜索";
                font-size: 13px;
                color: #F9F0DA;
            }
    
            /*搜索框7*/
            .bar7 {background: #7BA7AB;}
            .bar7 form {
                height: 42px;
            }
            .bar7 input {
                width: 250px;
                border-radius: 42px;
                border: 2px solid #324B4E;
                background: #F9F0DA;
                transition: .3s linear;
                float: right;
            }
            .bar7 input:focus {
                width: 300px;
            }
            .bar7 button {
                background: none;
                top: -2px;
                right: 0;
            }
            .bar7 button:before{
              content: "\f002";
              font-family: FontAwesome;
              color: #324b4e;
            }
    
            /*搜索框8*/
            .bar8 {background: #B46381;}
            .bar8 form {
                height: 42px;
            }
            .bar8 input {
                width: 0;
                padding: 0 42px 0 15px;
                border-bottom: 2px solid transparent;
                background: transparent;
                transition: .3s linear;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
            }
            .bar8 input:focus {
                width: 300px;
                z-index: 1;
                border-bottom: 2px solid #F9F0DA;
            }
            .bar8 button {
                background: #683B4D;
                top: 0;
                right: 0;
            }
            .bar8 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div class="search bar1">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar2">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar3">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar4">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar5">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar6">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar7">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar8">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    </div>
    </body>
    </html>
    展开全文
  • 7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索框7组漂亮的纯CSS3搜索
  • 纯css3 ui搜索框样式代码 纯css3 ui搜索框样式代码 纯css3 ui搜索框样式代码
  • 【CSS3】8款好看的纯CSS3搜索框 8款纯CSS3搜索框 <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css...

    【CSS3】8款好看的纯CSS3搜索框

    8款纯CSS3搜索框
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
        * {
            box-sizing: border-box;
        }
    
        body {
            margin: 0;
            padding: 0;
            background: #494A5F;
            font-weight: 500;
            font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
    
        #container {
            width: 500px;
            height: 820px;
            margin: 0 auto;
        }
        div.search {padding: 30px 0;}
    
        form {
            position: relative;
            width: 300px;
            margin: 0 auto;
        }
    
        input, button {
            border: none;
            outline: none;
        }
    
        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }
    
        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }
    
        /*搜索框1*/
        .bar1 {background: #A3D0C3;}
        .bar1 input {
            border: 2px solid #7BA7AB;
            border-radius: 5px;
            background: #F9F0DA;
            color: #9E9C9C;
        }
        .bar1 button {
            top: 0;
            right: 0;
            background: #7BA7AB;
            border-radius: 0 5px 5px 0;
        }
        .bar1 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
    
        /*搜索框2*/
        .bar2 {background: #DABB52;}
        .bar2 input, .bar2 button {
            border-radius: 3px;
        }
        .bar2 input {
            background: #F9F0DA;
        }
        .bar2 button {
            height: 26px;
            width: 26px;
            top: 8px;
            right: 8px;
            background: #F15B42;
        }
        .bar2 button:before {
            content: "\f105";
            font-family: FontAwesome;
            color: #F9F0DA;
            font-size: 20px;
            font-weight: bold;
        }
    
        /*搜索框3*/
        .bar3 {background: #F9F0DA;}
        .bar3 form {background: #A3D0C3;}
        .bar3 input, .bar3 button {
            background: transparent;
        }
        .bar3 button {
            top: 0;
            right: 0;
        }
        .bar3 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
    
        /*搜索框4*/
        .bar4 {background: #F15B42;}
        .bar4 form {
            background: #F9F0DA;
            border-bottom: 2px solid #BE290E;
        }
        .bar4 input, .bar4 button {
            background: transparent;
        }
        .bar4 button {
            top: 0;
            right: 0;
        }
        .bar4 button:before {
            content: "\f178";
            font-family: FontAwesome;
            font-size: 20px;
            color: #be290e;
        }
    
        /*搜索框5*/
        .bar5 {background: #683B4D;}
        .bar5 input, .bar5 button {
            background: transparent;
        }
        .bar5 input {
            border: 2px solid #F9F0DA;
        }
        .bar5 button {
            top: 0;
            right: 0;
        }
        .bar5 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
        .bar5 input:focus {
            border-color: #311c24
        }
    
        /*搜索框6*/
        .bar6 {background: #F9F0DA;}
        .bar6 input {
            border: 2px solid #c5464a;
            border-radius: 5px;
            background: transparent;
            top: 0;
            right: 0;
        }
        .bar6 button {
            background: #c5464a;
            border-radius: 0 5px 5px 0;
            width: 60px;
            top: 0;
            right: 0;
        }
        .bar6 button:before {
            content: "搜索";
            font-size: 13px;
            color: #F9F0DA;
        }
    
    
        /*搜索框7*/
        .bar7 {background: #7BA7AB;}
        .bar7 form {
            height: 42px;
        }
        .bar7 input {
            width: 250px;
            border-radius: 42px;
            border: 2px solid #324B4E;
            background: #F9F0DA;
            transition: .3s linear;
            float: right;
        }
        .bar7 input:focus {
            width: 300px;
        }
        .bar7 button {
            background: none;
            top: -2px;
            right: 0;
        }
        .bar7 button:before{
          content: "\f002";
          font-family: FontAwesome;
          color: #324b4e;
        }
    
        /*搜索框8*/
        .bar8 {background: #B46381;}
        .bar8 form {
            height: 42px;
        }
        .bar8 input {
            width: 0;
            padding: 0 42px 0 15px;
            border-bottom: 2px solid transparent;
            background: transparent;
            transition: .3s linear;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
        }
        .bar8 input:focus {
            width: 300px;
            z-index: 1;
            border-bottom: 2px solid #F9F0DA;
        }
        .bar8 button {
            background: #683B4D;
            top: 0;
            right: 0;
        }
        .bar8 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
    </style>
    
    <div class="search bar2">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar3">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar4">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar5">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar6">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar7">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    <div class="search bar8">
        <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
        </form>
    </div>
    
    展开全文
  • 纯CSS3霓虹样式搜索框动画特效是一款基于css3 transform属性制作点击搜索按钮展开收缩搜索框代码。
  • 8款纯CSS3搜索

    千次阅读 2017-09-14 08:52:54
    效果图: 8款纯CSS3搜索框 * { box-sizing: border-box; } body { margin: 0; padding: 0; backgroun

    效果图:



    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>8款纯CSS3搜索框</title>
    
        <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <style>
            * {
                box-sizing: border-box;
            }
    
            body {
                margin: 0;
                padding: 0;
                background: #494A5F;
                font-weight: 500;
                font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
            }
    
            #container {
                width: 500px;
                height: 820px;
                margin: 0 auto;
            }
            div.search {padding: 30px 0;}
    
            form {
                position: relative;
                width: 300px;
                margin: 0 auto;
            }
    
            input, button {
                border: none;
                outline: none;
            }
    
            input {
                width: 100%;
                height: 42px;
                padding-left: 13px;
                padding-right:46px;
            }
    
            button {
                height: 42px;
                width: 42px;
                cursor: pointer;
                position: absolute;
            }
    
            /*搜索框1*/
            .bar1 {background: #A3D0C3;}
            .bar1 input {
                border: 2px solid #7BA7AB;
                border-radius: 5px;
                background: #F9F0DA;
                color: #9E9C9C;
            }
            .bar1 button {
                top: 0;
                right: 0;
                background: #7BA7AB;
                border-radius: 0 5px 5px 0;
            }
            .bar1 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
    
            /*搜索框2*/
            .bar2 {background: #DABB52;}
            .bar2 input, .bar2 button {
                border-radius: 3px;
            }
            .bar2 input {
                background: #F9F0DA;
            }
            .bar2 button {
                height: 26px;
                width: 26px;
                top: 8px;
                right: 8px;
                background: #F15B42;
            }
            .bar2 button:before {
                content: "\f105";
                font-family: FontAwesome;
                color: #F9F0DA;
                font-size: 20px;
                font-weight: bold;
            }
    
            /*搜索框3*/
            .bar3 {background: #F9F0DA;}
            .bar3 form {background: #A3D0C3;}
            .bar3 input, .bar3 button {
                background: transparent;
            }
            .bar3 button {
                top: 0;
                right: 0;
            }
            .bar3 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
    
            /*搜索框4*/
            .bar4 {background: #F15B42;}
            .bar4 form {
                background: #F9F0DA;
                border-bottom: 2px solid #BE290E;
            }
            .bar4 input, .bar4 button {
                background: transparent;
            }
            .bar4 button {
                top: 0;
                right: 0;
            }
            .bar4 button:before {
                content: "\f178";
                font-family: FontAwesome;
                font-size: 20px;
                color: #be290e;
            }
    
            /*搜索框5*/
            .bar5 {background: #683B4D;}
            .bar5 input, .bar5 button {
                background: transparent;
            }
            .bar5 input {
                border: 2px solid #F9F0DA;
            }
            .bar5 button {
                top: 0;
                right: 0;
            }
            .bar5 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
            .bar5 input:focus {
                border-color: #311c24
            }
    
            /*搜索框6*/
            .bar6 {background: #F9F0DA;}
            .bar6 input {
                border: 2px solid #c5464a;
                border-radius: 5px;
                background: transparent;
                top: 0;
                right: 0;
            }
            .bar6 button {
                background: #c5464a;
                border-radius: 0 5px 5px 0;
                width: 60px;
                top: 0;
                right: 0;
            }
            .bar6 button:before {
                content: "搜索";
                font-size: 13px;
                color: #F9F0DA;
            }
    
    
            /*搜索框7*/
            .bar7 {background: #7BA7AB;}
            .bar7 form {
                height: 42px;
            }
            .bar7 input {
                width: 250px;
                border-radius: 42px;
                border: 2px solid #324B4E;
                background: #F9F0DA;
                transition: .3s linear;
                float: right;
            }
            .bar7 input:focus {
                width: 300px;
            }
            .bar7 button {
                background: none;
                top: -2px;
                right: 0;
            }
            .bar7 button:before{
                content: "\f002";
                font-family: FontAwesome;
                color: #324b4e;
            }
    
            /*搜索框8*/
            .bar8 {background: #B46381;}
            .bar8 form {
                height: 42px;
            }
            .bar8 input {
                width: 0;
                padding: 0 42px 0 15px;
                border-bottom: 2px solid transparent;
                background: transparent;
                transition: .3s linear;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
            }
            .bar8 input:focus {
                width: 300px;
                z-index: 1;
                border-bottom: 2px solid #F9F0DA;
            }
            .bar8 button {
                background: #683B4D;
                top: 0;
                right: 0;
            }
            .bar8 button:before {
                content: "\f002";
                font-family: FontAwesome;
                font-size: 16px;
                color: #F9F0DA;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div class="search bar1">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar2">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar3">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar4">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar5">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar6">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar7">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    
        <div class="search bar8">
            <form>
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    </div>
    </body>
    </html>
    


    展开全文
  • 纯CSS3 UI制作搜索框样式代码里面包含7种不同样式风格的搜索框特效。
  • 纯CSS3霓虹样式搜索框动画特效是一款基于css3 transform属性制作点击搜索按钮展开收缩搜索框代码。
  • 本文通过实例代码给大家分享8款纯CSS3实现的搜索框功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 这是一款使用CSS3制作的搜索框UI设计效果。这些搜索框在设计上代码简洁,设计风格以扁平风格为主,效果时尚大方。
  • 纯CSS地址搜索

    2018-01-17 15:42:38
    /*地址搜索框*//*地址搜索框*/ .searchPageTopIcon-icon{height:1.3rem; width:1.3rem; display:block; position:relative;}  .searchPageTopIcon:before, .searchPageTopIcon:after{content:''; height:0.5rem; ...
    /*地址搜索框*//*地址搜索框*/
    
    .searchPageTopIcon-icon{height:1.3rem; width:1.3rem; display:block; position:relative;} 
    .searchPageTopIcon:before, .searchPageTopIcon:after{content:''; height:0.5rem; display:block; position:absolute; top:0.1rem; left:0.1rem; }
    .searchPageTopIcon:before{width:0.5rem; border:0.1rem #787878 solid; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}
    .searchPageTopIcon:after{width:0.15rem;height:0.3rem; background:#787878; border-radius: 10%; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:0.6rem; left:0.7rem;}
    展开全文
  • 纯CSS3霓虹样式搜索框动画特效是一款基于css3 transform属性制作点击搜索按钮展开收缩搜索框代码。
  • 纯CSS3 UI制作搜索框样式代码里面包含7种不同样式风格的搜索框特效。
  • 纯css3 transform动画属性鼠标滑过搜索框动画展开文本
  • 一款纯css+js实现超酷的搜索框特效,是一个很好的搜索框源码的例子,喜欢的朋友可以下载学习一下。()
  • 8款好看的纯CSS3搜索

    千次阅读 2018-07-10 12:21:32
    <title>8款纯CSS3搜索框 <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> * { box-sizing: border-box; }...
  • 你好呀! 是否曾经想过只使用纯CSS克隆google搜索页面? 这就是您的操作方式,这是使用纯CSS的google搜索页面前端克隆。 使用的技术: CSS HTML 预习 如果您愿意,请加注星标。
  • 图片轮播(bootstrap)与 圆角搜索框(纯css)
  • 最近刚好遇到UI要求,需要实现一个比较炫的loading和用css实现搜索图标,记录一下 1、loading <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • 一个很漂亮会发光的搜索边框,使用的是css3的动画,没有js,代码简洁,兼容手机,平板,pc设备
  • html:<divclass="searchicon"></div>css:.search.icon{color:#000;pos...
  • CSS语言:CSSSCSS确定body {background: #e03a29;}.container {position: absolute;left: 50%;top: 50%;transform: translate(-50%);}.search-box input[type="text"] {border: none;background: none;z-index: 1;...
  • 【CSS】纯CSS点击显示隐藏

    千次阅读 2019-09-30 17:24:00
    纯CSS点击显示隐藏,不需要加载任何文件,参考案例: <style type="text/css"> #show{display:none;} #show:target{background:orange; display:block;} #hide:target{display:none;} </style> <a...
  • 解压密码:RJ4587 在html5tricks网站上,我们分享了好多纯CSS3实现的网页菜单,大家可以去CSS3菜单栏目下搜索。今天要分享的这款菜单也是利用纯CSS3实现,这款CSS3菜单的菜单项下边框有各种漂亮的彩带,鼠标滑过时...
  • HTML部分: 搜索 手机| 电动牙刷| 电视| 海尔空调| 洗衣机| 茅台| 热水器| iPad| 微波炉 CSS部分: /* 头部 */ .headerbg{ background-color: #fff; min-width: 1190px; } .headernav .container{ /* border: 1px ...
  • 纯CSS3实现图片墙

    千次阅读 2015-06-02 16:38:00
    DIV+CSS基础 CSS3的transform 和 transition用法 主要是用了transform的rotate/scale 动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function) CSS3的box-shadow..这里只用到外...
  • 之前为大家介绍了好几款响应式导航。今天再给大家带来一款纯css3实现的响应式导航。这款导航还有个响应式的搜索框。具体代码请看下
  • html+css+js仿小米官网主页、搜索页、详情页

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,974
精华内容 10,389
热门标签
关键字:

纯css搜索