最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

特效一覽

劃線動態(tài) ：

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)桐廬,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

動態(tài)邊框 ：

劃線動態(tài)

效果圖

原理和代碼

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

  
  

web前端開發(fā)學習Q-q-u-n： 784783012 ，分享開發(fā)工具，零基礎(chǔ)，進階視頻教程，希望新手少走彎路

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

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

input 標簽需要禁用默認樣式：

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

span 標簽實現(xiàn)「左進右出」的動態(tài)，需要改變 transform-origin 方向。為了避免回流重繪，通過 scaleX 來實現(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;
}

動態(tài)邊框

效果圖

原理和代碼

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

  
  
  
  
  

web前端開發(fā)學習Q-q-u-n： 784783012 ，分享開發(fā)工具，零基礎(chǔ)，進階視頻教程，希望新手少走彎路

和「劃線動態(tài)」類似，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);
}

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

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