web前端動(dòng)畫專題（2）：輸入框特效-創(chuàng)新互聯(lián)

特效一覽

劃線動(dòng)態(tài) ：

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元順平做網(wǎng)站,已為上家服務(wù),為順平各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

動(dòng)態(tài)邊框 ：

劃線動(dòng)態(tài)

效果圖

原理和代碼

:before 和 :after 偽元素指定了一個(gè)元素文檔樹內(nèi)容之前和之后的內(nèi)容。由于 input 標(biāo)簽不是可插入內(nèi)容的容器。所以這里下劃線無法通過偽元素來實(shí)現(xiàn)。需要借助其他 dom 節(jié)點(diǎn)。

<div>
  <input type="text" />
  <span></span>
</div>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享開發(fā)工具，零基礎(chǔ)，進(jìn)階視頻教程，希望新手少走彎路

包裹在外的父元素 div 應(yīng)該設(shè)置成 inline-block ，否則寬度會(huì)滿屏。

div {
  position: relative;
  display: inline-block;
}

input 標(biāo)簽需要禁用默認(rèn)樣式：

input {
  outline: none;
  border: none;
  background: #fafafa;
}

span 標(biāo)簽實(shí)現(xiàn)「左進(jìn)右出」的動(dòng)態(tài)，需要改變 transform-origin 方向。為了避免回流重繪，通過 scaleX 來實(shí)現(xiàn)寬度變化的視覺效果。

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;
}

動(dòng)態(tài)邊框

效果圖

原理和代碼

如動(dòng)態(tài)圖所示，有 4 條邊框。所以除了 input 元素外，還需要準(zhǔn)備其他 4 個(gè) dom。為了方便定位，嵌套一個(gè)父級(jí)元素。

<div>
  <input type="text">
  <span class="bottom"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span>
</div>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享開發(fā)工具，零基礎(chǔ)，進(jìn)階視頻教程，希望新手少走彎路

和「劃線動(dòng)態(tài)」類似，input 和 div 的樣式基本一樣。為了好看，改一下 padding 屬性。

div {
  position: relative;
  display: inline-block;
  padding: 3px;
}
input {
  outline: none;
  border: none;
  background: #fafafa;
  padding: 3px;
}

對(duì)于其他 4 個(gè) span 元素，它們的位置屬性，動(dòng)畫屬性，以及顏色都是相同的：

.bottom,
.top,
.left,
.right {
  position: absolute;
  background-color: #262626;
  transition: transform 0.1s ease-in-out;
}

對(duì)于.bottom 和.top，它們的變化方向是水平；對(duì)于.left 和.right，它們的變化方向是垂直。

.bottom,
.top {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
}
.left,
.right {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
}

下面就是處理延時(shí)的特效。動(dòng)態(tài)圖中，動(dòng)畫按照下、右、上、左的順序依次變化。借助的是 transition-delay 屬性，來實(shí)現(xiàn)動(dòng)畫延遲。

.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前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享開發(fā)工具，零基礎(chǔ)，進(jìn)階視頻教程，希望新手少走彎路

文章標(biāo)題：web前端動(dòng)畫專題（2）：輸入框特效-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.muchs.cn/article44/cdecee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、Google、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)