[分享]css3搜索条代码

CSS3 搜索条是一个非常炫酷的特效，在网站的设计中经常使用。下面给大家介绍一下如何实现 CSS3 搜索条。

/* CSS3 搜索条 */
.search-bar {
    position: relative;
    width: 250px;
    margin: 20px auto;
}

.search-input {
    width: 100%;
    padding: 8px 10px;
    border: none;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    cursor: pointer;
}

.search-button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
    border: 2px solid #333;
    border-top: none;
    border-right: none;
    transition: all 0.3s ease-in-out;
}

.search-button:hover:before {
    transform: translate(-50%, -50%) rotate(45deg);
} 

代码含义：这是 CSS3 实现的搜索条代码。包含了搜索文本框和搜索按钮两个主要元素。具体代码请查看上述代码的注释。