CSS 筆記 - 金魚系列 11 - 破格式的簡單設計切版

這次練習很有趣，是破格式的切版，並且讓 icon 可以左右搖動，當中有許多眉角可以學習。

學習重點

relative 定位教學
absolute 定位教學
Animation 網頁動畫教學
flex 教學
background-image 綜合寫法
偽元素 ::before 的使用

HTML 結構

結構相當簡單，有 item、icon、標題、文字。

<div class="wrap">
  <div class="item">
    <div class="icon"><i class="fas fa-fish fa-4x"></i></div>
    <div class="text">
      <h3>金魚系列 V</h3>
      <p>破格式設計切版，算是進階的簡單切版，學起來很多地方依然很受用喔!</p>
      <p>
        一人女子檢測部隊儘快說了春天，活力來自不願再次那些指出形成隨意患者來電，減肥慢慢浙江很多人所說參與。
      </p>
    </div>
  </div>
  <div class="item">
    <div class="icon"><i class="fas fa-brain fa-4x"></i></div>
    <div class="text">
      <h3>切版好燒腦?</h3>
      <p>跟著金魚系列切一輪，除了補強觀念外，也可跟著 Amos 學到很多切版喔!</p>
      <p>
        豐富可能會關閉無比一般請教，得分現代化，安裝策劃表面界面從而居民號碼大型，認證臨床影響，氣息傳輸甚。
      </p>
    </div>
  </div>
  <div class="item">
    <div class="icon"><i class="fas fa-code fa-4x"></i></div>
    <div class="text">
      <h3>刻意的練習</h3>
      <p>有 input 就要有 output，技術若沒有刻意的練習，是不會進步的喔!</p>
      <p>
        還沒有，存儲命運一遍門派系統正是圖書加油，保健作用原創責任編輯，還沒熱線報導複製品質回覆試試女孩任。
      </p>
    </div>
  </div>
</div>

CSS 樣式

紀錄幾個重點：

body 設定

要讓 item 內容垂直對齊。

body {
  display: flex;
  align-items: center;
}

.wrap 設定

讓 item 變為橫排。
因為破格關係，往上推擠圖示的空間(依照自己設定的圖示大小給予適當的像素值)。

.wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  padding-top: 50px;
}

.item 樣式

做成三欄式，使用百分比做為單位，也是 RWD 的寫法。
高度是最後依照文字高度做設定。
寬度一開始式設定 33.33333%，要扣掉線條寬度以及 margin 寬度，最後變成 29.33333%。

.item {
  width: 29.33333%;
  height: 269px;
  text-align: center;
  margin: 0 3%;
  background-color: #131261;
  border: 5px solid #ffd665;
  border-radius: 20px;
  cursor: pointer;

icon 樣式

最重要的就在這裡了!因為破格就是從這邊開始。

設定 icon 的高度。
margin-top 的部分就依照自己喜歡的位置設定，當然也要考慮到邊框線的交接點。
做成圓形，所以 border-radius 只要夠大就確保在不同解析度下都是圓形，這邊設定 border-radius: 100%;，當然也可以設定成像素。
邊框限用偽元素來做，原因是圓形是由正方形變成的，圓形看似都相連在一起的線條，其實會有斜角的交接點，可以參考 CSS 筆記 - 三角形演進史，可以知道邊框線其實還是維持上右下左的位置，因為之後要將左跟下的邊框變為透明，這樣圓形邊框線會變成 45 度角呈現，為了不要旋轉後影響到 icon ，所以使用偽元素來製作。
讓 font-awesome 的圖示置中對齊 icon，使用最簡單的 line-height 對齊。

.icon {
  width: 150px;
  height: 150px;
  margin: -75px auto 0;
  background-color: #131261;
  border-radius: 100%;
  position: relative; //偽元素的相對定位
  //icon 外框線
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #ffd665;
    top: -5px;
    left: -5px;
    border-radius: 100%;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(-45deg);
  }
  .fas {
    line-height: 150px;
    color: #ffd665;
  }
}

text 設定

.item 裡面的文字設定，這邊有使用到絕對定位的原因，是正方形旋轉後下方空間太大，為了讓畫面好看且平衡，使用絕對定位讓文字與 .icon 空間相距適合的距離。

.text {
  padding: 20px;
  position: absolute; //絕對定位於item
  top: 30px;
  h3 {
    color: #ffd665;
    font-size: 32px;
    font-weight: 500;
    padding-bottom: 1%;
  }
  p {
    color: #ffffff;
    font-weight: 100;
    line-height: 1.5;
    padding-bottom: 5%;
  }
}

hover 跟 animation 效果

這邊要做的是當滑鼠移動到 item 時，給予 icon 裡面的圖示有持續左右搖動的動畫效果，產生互動。
這裡使用 drop-shadow 與 animation 動畫。

.item {
  width: 29.33333%;
  height: 269px;
  text-align: center;
  margin: 0 3%;
  background-color: #131261;
  border: 5px solid #ffd665;
  border-radius: 20px;
  box-shadow: 0px 0px 5px #000000;
  position: relative; //text 的相對定位
  cursor: pointer;
  //item hover
  &:hover {
    .fas {
      animation: shake 0.2s linear infinite alternate; //動畫
      transition: all 0.5s;
      // color: #ffebb4;
      filter: drop-shadow(0 0 10px #ffebb4);
    }
  }

  @keyframes shake {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

這樣就完成啦!!

CodePen https://codepen.io/hnzxewqw/full/ExPGBbO

參考資料

金魚都能懂的這個網頁畫面怎麼切 : 破格式設計