web前端動畫專題(2):輸入框特效
特效一覽
劃線動態 :
動態邊框 :
劃線動態
效果圖
原理和程式碼
:before
和
:after
偽元素指定了一個元素文件樹內容之前和之後的內容。由於
input
標籤不是可插入內容的容器。所以這裡下劃線無法通過偽元素來實現。需要藉助其他 dom 節點。
<div>
<input type="text" />
<span></span>
</div>
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
包裹在外的父元素
div
應該設定成
inline-block
,否則寬度會滿屏。
div {
position: relative;
display: inline-block;
}
input
標籤需要禁用預設樣式:
input {
outline: none;
border: none;
background: #fafafa;
}
span
標籤實現「左進右出」的動態,需要改變
transform-origin
方向。為了避免迴流重繪,通過
scaleX
來實現寬度變化的視覺效果。
input ~ span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #262626;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.3s ease-in-out;
}
input:focus ~ span {
transform: scaleX(1);
transform-origin: left center;
}
動態邊框
效果圖
原理和程式碼
如動態圖所示,有 4 條邊框。所以除了
input
元素外,還需要準備其他 4 個 dom。為了方便定位,巢狀一個父級元素。
<div>
<input type="text">
<span class="bottom"></span>
<span class="right"></span>
<span class="top"></span>
<span>
</div>
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
和「劃線動態」類似,input 和 div 的樣式基本一樣。為了好看,改一下 padding 屬性。
div {
position: relative;
display: inline-block;
padding: 3px;
}
input {
outline: none;
border: none;
background: #fafafa;
padding: 3px;
}
對於其他 4 個 span 元素,它們的位置屬性,動畫屬性,以及顏色都是相同的:
.bottom,
.top,
.left,
.right {
position: absolute;
background-color: #262626;
transition: transform 0.1s ease-in-out;
}
對於.bottom 和.top,它們的變化方向是水平;對於.left 和.right,它們的變化方向是垂直。
.bottom,
.top {
left: 0;
right: 0;
height: 1px;
transform: scaleX(0);
}
.left,
.right {
top: 0;
bottom: 0;
width: 1px;
transform: scaleY(0);
}
下面就是處理延時的特效。動態圖中,動畫按照下、右、上、左的順序依次變化。藉助的是
transition-delay
屬性,來實現動畫延遲。
.bottom {
bottom: 0;
transform-origin: right center;
}
input:focus ~ .bottom {
transform: scaleX(1);
transform-origin: left center;
}
.top {
top: 0;
transform-origin: left center;
transition-delay: 0.2s;
}
input:focus ~ .top {
transform: scaleX(1);
transform-origin: right center;
}
.right {
transform-origin: top center;
right: 0;
transition-delay: 0.1s;
}
input:focus ~ .right {
transform: scaleY(1);
transform-origin: bottom center;
}
.left {
left: 0;
transform-origin: bottom center;
transition-delay: 0.3s;
}
input:focus ~ .left {
transform: scaleY(1);
transform-origin: top center;
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2652765/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 前端動畫專題(二):輸入框特效前端動畫特效
- web前端動畫專題(1):字型特效Web前端動畫特效
- web前端動畫專題(3):撩人的按鈕特效Web前端動畫特效
- 前端動畫專題(一):字型特效前端動畫特效
- CSS3 單選框動畫特效CSSS3動畫特效
- 從零開始學前端動畫 —— 簡單的特效登入前端動畫特效
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- Web聊天工具的富文字輸入框Web
- react輸入框輸入中文bugReact
- 【web前端】面題整理(2)Web前端
- input 輸入框只能輸入數字
- 從一次輸入框無法輸入的bug,談如何限制輸入框輸入型別型別
- imemode 控制輸入法,控制輸入框的輸入法
- Web前端面試題整理2Web前端面試題
- 精美的web前端原始碼的特效Web前端原始碼特效
- input輸入框的游標定位的問題
- 前端面試:H5 如何清除Input輸入框多次輸入的歷史記錄?前端面試H5
- js實現element中可清空的輸入框(2)JS
- Input 輸入框中 只能輸入正整數
- flutter TextField 輸入框元件Flutter元件
- 自定義UITextView輸入框UITextView
- 輸入框過濾操作
- input只能輸入文字框
- 輸入框只能輸入負數,整數,2位小數(鍵盤彈起事件)事件
- EditText輸入框自動頂上去2種解決方案
- iOS 動畫特效(swift)iOS動畫特效Swift
- 【Flutter 專題】65 圖解基本 TextField 文字輸入框 (二)|8月更文挑戰Flutter圖解
- 從登入框看前端前端
- Flutter 驗證碼輸入框Flutter
- 需要輸入框?試試TextInputLayout
- Jquery 應用(清空輸入框)jQuery
- 輸入框軟鍵盤遮擋問題解決方案
- Android 軟鍵盤蓋住輸入框的問題Android
- 直播系統原始碼,Vue 禁止輸入框輸入空格原始碼Vue
- iOS 防止輸入時鍵盤覆蓋掉輸入框iOS
- js 校驗輸入框還可以輸入多少個字JS
- ios OC 輸入框禁止輸入空格/去掉空格/只能輸入字母和數字iOS
- web前端入門到實戰:css滑鼠經過彈出子選單特效Web前端CSS特效