純 CSS 實現斜紋效果

此箋贈少年發表於2019-02-26
CSS

起因

開啟WeGame玩LOL時，發現要更新，無意間瞥見了這個效果（PS： 我老了，這倆戰隊我一個都不認識）

效果圖

不知道你們第一眼想到了什麼，反正我是想到了下面這貨

純 CSS 實現斜紋效果

擴充套件閱讀：為什麼很多理髮店的門口設有旋轉的圓筒燈箱？

然後..........然後 我就想實現一下這個效果， 然後...... 然後就是 到現在我也莫得遊戲玩

純 CSS 實現斜紋效果

最後實現的效果如下，純天然 CSS 實現，開袋即食，絕不新增任何防腐劑，隔壁小孩都饞哭了

純 CSS 實現斜紋效果

經過

二話不說, 開啟 vscode 就開始擼，首先是 HTML 結構

    <div class="cont">
        <div class="twill"></div>
        <div class="btn">檢視詳情</div>
    </div>
複製程式碼

這個很簡單不多說，重點看一下斜紋的實現 ???


  
  .twill {
    width: 20px;
    height: 2000px;
    background: skyblue;
    position: absolute;
    left: 0px;
    top: -500px;
    transform: rotateZ(30deg);
    transform-origin: top left;
    box-shadow: 40px 0px 1px 1px rgba(255, 255, 255,0.6),
      80px 0px 1px 1px rgba(255, 255, 255,0.6),
      120px 0px 1px 1px rgba(255, 255, 255,0.6),
      160px 0px 1px 1px rgba(255, 255, 255,0.6),
      200px 0px 1px 1px rgba(255, 255, 255,0.6),
      240px 0px 1px 1px rgba(255, 255, 255,0.6),
      280px 0px 1px 1px rgba(255, 255, 255,0.6),
      320px 0px 1px 1px rgba(255, 255, 255,0.6),
      360px 0px 1px 1px rgba(255, 255, 255,0.6),
      400px 0px 1px 1px rgba(255, 255, 255,0.6),
      440px 0px 1px 1px rgba(255, 255, 255,0.6),
      480px 0px 1px 1px rgba(255, 255, 255,0.6),
      520px 0px 1px 1px rgba(255, 255, 255,0.6),
      560px 0px 1px 1px rgba(255, 255, 255,0.6),
      600px 0px 1px 1px rgba(255, 255, 255,0.6),
      640px 0px 1px 1px rgba(255, 255, 255,0.6);

  }
  
複製程式碼

通過 box-shadow 新增多條陰影，通過 transform 實現斜紋

最後當然是要讓它自己動起來啦, 就決定是你了！ 出來吧！ animation ！！！

純 CSS 實現斜紋效果

程式碼在下面 ???

  @keyframes move {
    0% {
      left: 0px;
    }
  
    100% {
      left: 45px;
    }
  }
  .twill{
      animation: move 1s linear infinite ;
  }
  
複製程式碼

codePen 完整程式碼檢視

結果

你問我結果？ 結果就是

  • 到現在我都沒玩上LOL

  • 這篇含水量99.99%的文章

  • 你們會給我點讚的，對吧？

  • 取色的時候沒找到合適的工具，然後就想用electron寫一個拾色器

    純 CSS 實現斜紋效果

  • 錄製效果的時候，想寫一個 gif錄製工具，最後找到一個感覺良好的工具 點我下載 ScreenToGif

請教大佬們一個問題，如何用 less 或者 scss 函式 生成這個長長的 box-shadow ?, 我用scss的迴圈試了一下，失敗了，我果然是個小菜鳥

純 CSS 實現斜紋效果

沒啥可寫的了，那就給大家拜個晚年，祝大家晚年幸福!，逃~~~

我是子夜，一個除了水還是水的菜鳥前端，公眾號：暫無，QQ群：暫無 ，（前排出租廣告位）

相關文章