国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css-虛線邊框滾動效果

Ocean / 1202人閱讀

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

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

基本HTML


  
測試測試
Easy-way

通過背景圖片實現(xiàn)。

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

.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撐開高度，白色背景覆蓋外層div漸變。

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一個BFC，解決margin在垂直方向上折疊的問題
  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

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

.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)進入候選推薦規(guī)范之列，會說以后進入既定規(guī)范標(biāo)準(zhǔn)已經(jīng)是板上釘釘?shù)氖虑椋蠹铱梢苑判膶W(xué)習(xí)，將來必有用處。

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

.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;        // 這里不透明顏色隨便寫哦
  -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點這里

PS

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

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

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

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

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

個人博客求友鏈～

花里胡哨電子簡歷～有時間的話可以一看。

參考

張哥虛線邊框

mask教程

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114584.html

相關(guān)文章

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

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

    DevWiki 評論0 收藏0

  • CSS基礎(chǔ)匯總

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

    番茄西紅柿 評論0 收藏0

  • 前端頁面總結(jié)

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

    番茄西紅柿 評論0 收藏0

  • 前端css

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

    番茄西紅柿 評論0 收藏0

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

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

    hosition 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<