css3+贝塞尔曲线实现可伸缩input搜索框效果

1. 简介

CSS3的贝塞尔曲线是一种可以用来定义动画过程的函数，可以实现弹性效果、渐变效果、缓动效果等。在实现可伸缩input搜索框效果中，我们可以利用贝塞尔曲线来实现input框的伸缩动画效果，使其在点击或悬停时可以展开或收缩。

2. 实现过程

2.1 HTML结构

首先，需要创建一个HTML结构，包含一个input框和一个搜索按钮。

<div class="search-box">
    <input type="text" id="search-input" placeholder="输入搜索内容" />
    <button id="search-btn">搜索</button>
</div>

2.2 CSS样式

对于这个搜索框，我们需要设置一些基本样式，以及实现动画效果。以下是一些重要的CSS样式代码。

.search-box {
    position: relative;
    width: 200px;
    height: 40px;
    overflow: hidden;
    transition: width 0.6s ease;
}
#search-input {
    width: 200px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 10px;
    transition: width 0.6s ease;
}
#search-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: #ccc;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

上述代码中，通过设置搜索框容器元素（class为"search-box"）的宽度为200px，并利用过渡属性（transition）实现了宽度的动画效果。通过设置输入框元素（id为"search-input"）的宽度为200px，同样利用过渡属性实现了宽度的动画效果。

在hover状态下，通过设置按钮元素（id为"search-btn"）的背景颜色的过渡效果，实现了鼠标悬停时按钮颜色的变化。

2.3 JavaScript交互

为了实现点击输入框或按钮时搜索框的伸缩效果，需要使用JavaScript来处理交互事件。以下是一段示例代码：

const searchBox = document.querySelector('.search-box');
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
searchInput.addEventListener('focus', function() {
    searchBox.style.width = '300px';
});
searchInput.addEventListener('blur', function() {
    searchBox.style.width = '200px';
});
searchBtn.addEventListener('click', function() {
    if (searchBox.style.width === '200px') {
        searchBox.style.width = '300px';
    } else {
        searchBox.style.width = '200px';
    }
});

上述代码中，通过获取搜索框、输入框和按钮的引用，分别为输入框的focus和blur事件以及按钮的click事件添加了事件监听器。在focus事件中，将搜索框的宽度调整为300px，实现了输入框展开的动画效果。在blur事件中，将搜索框的宽度调整为200px，实现了输入框收缩的动画效果。在按钮的click事件中，通过判断搜索框的宽度，实现了点击按钮时搜索框的展开或收缩效果。

3. 实现效果

通过上述的HTML结构、CSS样式和JavaScript交互的实现，就可以实现一个可伸缩的输入框搜索框效果。

效果示例：（此处使用了CSS3的过渡和贝塞尔曲线效果）

4. 总结

通过CSS3的贝塞尔曲线和过渡效果，我们可以很方便地实现可伸缩的输入框搜索框效果。利用贝塞尔曲线，我们可以定义元素的动画过程，平滑地展示或隐藏输入框。同时，通过CSS的过渡效果，我们可以为动画效果添加一些渐变的过渡效果，使动画更加平滑。最后，通过JavaScript来处理交互事件，实现在不同的用户行为下搜索框的展开和收缩。整体来说，这个效果简单而实用，可以增加用户体验。