成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css-虛線邊框滾動(dòng)效果

Ocean / 1265人閱讀

摘要：新建一個(gè)，解決在垂直方向上折疊的問(wèn)題通過(guò)線性漸變以及畫(huà)出虛線，然后再通過(guò)將其移動(dòng)到四邊。參考張哥虛線邊框教程

常?？吹揭环N酷炫的效果，鼠標(biāo)hover一片區(qū)域后，區(qū)域顯示出虛線邊框，并且還有線條動(dòng)畫(huà)，那么這種效果具體是怎么實(shí)現(xiàn)的呢，本文提供了幾種思路僅供參考。

基本HTML


  
測(cè)試測(cè)試
Easy-way

通過(guò)背景圖片實(shí)現(xiàn)。

p得垂直居中哦，還記得如何垂直居中嗎？詳見(jiàn)另一篇博客～

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}
repeating-linear-gradient

135度repeating線性漸變，p撐開(kāi)高度，白色背景覆蓋外層div漸變。

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一個(gè)BFC，解決margin在垂直方向上折疊的問(wèn)題
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}
linear-gradient&&background

通過(guò)線性漸變以及background-size畫(huà)出虛線，然后再通過(guò)background-position將其移動(dòng)到四邊。這種方式比較好的地方在于可以分別設(shè)置四條邊的樣式以及動(dòng)畫(huà)的方向，細(xì)心的同學(xué)應(yīng)該會(huì)發(fā)現(xiàn)上一種方式的動(dòng)畫(huà)并不是順時(shí)針或者逆時(shí)針?lè)较虻摹?/p> 

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}
linear-gradient&&mask

mask屬性規(guī)范已經(jīng)進(jìn)入候選推薦規(guī)范之列，會(huì)說(shuō)以后進(jìn)入既定規(guī)范標(biāo)準(zhǔn)已經(jīng)是板上釘釘?shù)氖虑?，大家可以放心學(xué)習(xí)，將來(lái)必有用處。

這里同樣可以使用mask來(lái)實(shí)現(xiàn)相同的動(dòng)畫(huà)，并且可以實(shí)現(xiàn)虛線邊框漸變色這種效果，與background不同的是mask需要在中間加上一塊不透明的遮罩，不然p元素的內(nèi)容會(huì)被遮蓋住。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat;        // 這里不透明顏色隨便寫(xiě)哦
  -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}

具體demo點(diǎn)這里

PS

今天有一個(gè)人來(lái)我們這邊面試，五年工作經(jīng)驗(yàn)，上來(lái)頭頭是道說(shuō)自己參與過(guò)多少項(xiàng)目，獨(dú)自一人架構(gòu)一個(gè)什么前端項(xiàng)目，熟練css、js、html、vue等等等，聽(tīng)得我瑟瑟發(fā)抖。

然后問(wèn)了個(gè)簡(jiǎn)單的如何垂直居中，答曰：用flex；再問(wèn)怎么用flex，答：不太了解；問(wèn)還有什么方式，答曰：transform；再問(wèn)為何transform，答：不太了解。。。

等等等，問(wèn)了許多基礎(chǔ)的東西，大多不了解，更不用說(shuō)vue的相關(guān)原理，diff算法之流。

最后問(wèn)期望薪資，答：已有18k的offer，期望不要低于18k。

是我不了解行情了，還是現(xiàn)在壓根就不是寒冬了，拿著微薄薪水的我求個(gè)內(nèi)推～～南京或杭州地區(qū)。

個(gè)人博客求友鏈～

花里胡哨電子簡(jiǎn)歷～有時(shí)間的話可以一看。

參考

張哥虛線邊框

mask教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114584.html

相關(guān)文章

  • css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

    摘要：通過(guò)模糊來(lái)弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對(duì)比控件范圍輸入控件方式書(shū)中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

    DevWiki 評(píng)論0 收藏0

  • CSS基礎(chǔ)匯總

    摘要：默認(rèn)占滿整個(gè)頁(yè)面寬度，如果設(shè)置了指定寬度，則會(huì)用填充剩下的部分。關(guān)于浮動(dòng)的兩個(gè)特點(diǎn)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。CSS介紹 CSS（CascadingStyleSheet，層疊樣式表)定義如何顯示HTML元素。 當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化（渲染）。 CSS語(yǔ)法 CSS實(shí)例 每個(gè)CSS樣...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端頁(yè)面總結(jié)

    摘要：重疊元素元素的定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素屬性指定了一個(gè)元素的堆疊順序哪個(gè)元素應(yīng)該放在前面，或后面一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。元素的默認(rèn)值，沒(méi)有定位，遵循正常的文檔流對(duì)象。 靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。 fixed 定位 元素的位置相對(duì)于瀏覽器窗口是固定位...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端css

    摘要：格式如下外部樣式外部樣式就是將寫(xiě)在一個(gè)單獨(dú)的文件中，然后在頁(yè)面進(jìn)行引入即可。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。CSS介紹 CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化（渲染）。 CSS語(yǔ)法 CSS實(shí)例 每個(gè)CSS樣式由兩個(gè)組成部分：選擇器和聲明...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端學(xué)習(xí)之路之CSS （四）

    摘要：塊元素的例子內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。內(nèi)聯(lián)元素的例子如何改變一個(gè)元素顯示可以更改內(nèi)聯(lián)元素和塊元素把列表項(xiàng)顯示為內(nèi)聯(lián)元素把元素作為塊元素定位五大屬性定位元素的默認(rèn)值，即沒(méi)有定位，元素出現(xiàn)在正常的流中靜態(tài)定位的元素不會(huì)受到影響。?Infi-chu: http://www.cnblogs.com/Infi-chu/ ? CSS盒子模型?? ?概念：CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)?..

    hosition 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<