iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

喪屍黑白切系列 第 21

Day 21 | 這些人都是我的小弟...是員工 - 人員介紹卡片

今天要講的是金魚都能懂的網頁切版 : 人員介紹卡片 NO003

本篇關鍵字

  • clip-path
  • animation
  • transform: translateY()

範例檔


HTML

<div class="container">
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=1">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手,在自己產出的垃圾 Code 中打滾,希望可以透過不斷的練習,看看能不能讓我的 Code 從垃圾變成點什麼有用的東西(最好是錢,絕對要是錢)。</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=2">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手,在自己產出的垃圾 Code 中打滾,希望可以透過不斷的練習,看看能不能讓我的 Code 從垃圾變成點什麼有用的東西(最好是錢,絕對要是錢)。</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=3">
    </div>
    <div class="text">
      <h2>Zombi@Dump</h2>
      <p>一個今年誤入鐵人賽的切版新手,在自己產出的垃圾 Code 中打滾,希望可以透過不斷的練習,看看能不能讓我的 Code 從垃圾變成點什麼有用的東西(最好是錢,絕對要是錢)。</p>
    </div>
  </div>
</div>

CSS

body {
  width: 100%;
  height: 100vh;
  background-color: rgb(10, 0, 77);
  display: flex;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
}

.item {
  width: 370px;
  margin: 0 15px;
  border: 1px solid #aaa;
  background-color: rgb(255, 255, 255);
  transition: .5s;
}

.item:hover {
  animation: upDown 1s linear;
}

.item .pic{
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.item img {
  width: 100%;
  vertical-align: middle;
}

.item .text {
  padding: 40px 20px;
}

.item:hover {
  background-image: linear-gradient(0deg, #c33222 0%, #fdbb2d 40%);
}

.item .text h2 {
  padding-bottom: .3em;
  margin-bottom: .5em;
  font-weight: 900;
  border-bottom: 1px solid #000;
  text-align: center;
}

.item .text p {
  line-height: 1.8;
  font-weight: 300;
}

.item:hover .text h2 {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.item:hover .text p {
  color: #fff
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  75% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
  }
}

喪屍分解

  • 影片中,圖片的三角形是使用 ::before 做出來的,這個講過滿多次的了,可以參考前面幾篇講到的作法
  • 使用 clip-path 做出五邊形,套用在圖片上,讓圖片直接就是我所期望的長相,我是使用 https://bennettfeely.com/clippy/ 來繪製
  • 使用 background-image 做出 :hover 時漸層效果,剛好 Amos 今年的鐵人賽也有寫到這個,附上連結
  • 使用 transform: translateY() 做出 .item 上下移動的動畫

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是登入表單。


上一篇
Day 20 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 2
下一篇
Day 22 | 煩欸!我又忘記密碼了啦 - 登入表單
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言