css3+貝塞爾曲線實現可伸縮input搜索框效果
發(fā)布時間：2020-09-25 15:04:31 作者：李逸風 
我要評論
我要評論這篇文章主要介紹了css3+貝塞爾曲線實現可伸縮input搜索框效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
話不多說，上效果圖。
核心代碼就是 transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; 通過 transition 屬性的 cubic-bezier（貝塞爾曲線） 在過渡效果上加了個緩沖效果。 html代碼部分主要模塊就是一個input 外加一個 父級 div div寬度需要大于input寬度 不加 cubic-bezier 可以實現這個效果 transition: all 1s;
就是過渡效果少了個緩沖效果
我們這里使用到的運動曲線是
最后奉上完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.search-wrap{
margin: 0 auto;
width: 200px;
height: 200px;
}
.search{
width: 50px;
height: 30px;
margin: 20px 10px 0 0;
border: 1px solid #4000FF !important;
padding: 0 10px;
float: right;
border-radius: 5px;
color: #fff;
transition: all 1s;
opacity: .5;
}
.search:focus{
width: 100%;
outline:none;
}
</style>
</head>
<body>
<div class="search-wrap">
<input type="text" name="" class="search">
</div>
</body>
</html>
到此這篇關于css3+貝塞爾曲線實現可伸縮input搜索框效果的文章就介紹到這了,更多相關css3貝塞爾曲線伸縮input搜索框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
純css3實現類蘋果Yosemite系統(tǒng)的搜索框動畫效果源碼
這是一款基于純css3實現類蘋果Yosemite系統(tǒng)的搜索框動畫效果源碼.畫面中心默認顯示一個帶有搜索圖標的搜索框,且搜索圖標位于搜索框的中間位置.鼠標點擊搜索框時,搜索框獲得2019-11-22
css3 transform屬性制作點擊搜索按鈕展開收縮搜索框代碼。有需要的朋友可以直接下載使用2018-08-13
本文通過實例代碼給大家分享8款純CSS3實現的搜索框功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-14
純CSS3 UI實現七種不同風格的搜索框樣式特效源碼里面包含7種不同樣式風格的搜索框特效。每種效果都很獨特，效果非常棒。本段代碼適應于所有網頁使用，有需要的朋友可以直接2016-09-04
高級搜索框特效源碼是一款使用jQuery和CSS3制作的炫酷高級搜索框設計效果的代碼。在這個高級搜索框設計中，當用戶點擊了搜索按鈕之后，會出現搜索輸入框的特效2016-02-15
