iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0

菜菜菜的前端學習日誌 - Day29

剪裁

今天要講的是最近剛學到的效果 “剪裁”

因為要製作一個效果是像這樣

這個logo上像是有一條光閃過去

一直在想一直在想到底這要怎麼做呢

後來就克里斯大大建議我可以用 clip-path 去做

就稍微的研究一下,他就是會再有設定剪裁的範圍內才會顯示東西

今天就用這屬性來做出好玩的效果吧

今天要做的效果類似下面這種

實作

首先我們一樣先建立 Html 的部分吧

<div class="content">
  <p>Lorem100</p>
</div>

lorem100是隨機亂文100個單字,大家自己在 tab 一下就不全部放上來了,太佔版面了。

大概就像這樣

接下來我們美化它一下,再加上一些樣式吧~

*{
  margin: 0;
}
.content{
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
}
p{
  font-size: 20px;
}

這樣就漂亮多啦~(有嗎?!)

接下來就是重頭戲啦

我們要加上 clip-path這個屬性

使用這個屬性就能夠剪裁出圓形橢圓矩形(多邊形)的形狀

接下來就一一介紹一下參數如何設定,以下都會以作為單位

圓形

               //半徑    圓形中心點
clip-path: circle(50% at 50% 50%);

出來的效果會如下

它就會像是這樣,把設定的元素剪裁成圓形,其他的地方就不見了

橢圓

橢圓跟圓型不太一樣的是他半徑的參數有2個

前面是X軸的參數再來是Y軸的參數

當然如果XY軸都設一樣它也會是圓形

又或是只設一個半徑參數也會是圓形

               //X軸  Y軸    橢圓中心點
clip-path:ellipse(25% 50% at 50% 50%);

矩形(多邊形)

接下來就是矩形啦

要成立一個矩形最少要幾個參數呢?!

答案是要有3個沒錯,因為2個就是一條線了呀~

那它每個參數的值有2個

前面為X軸的點,後面為Y軸的點

組合起來就是那個點在元素上的座標位置

然後最重要的是不管今天要三角形、正方形甚至是七邊型都一樣

參數的順序一定要一致,要就全部按照順時針設定,要就全部逆時針設定

因為它是一個連續的線段,如果不按照方向性設定可能產生出來的效果會跟自己想的差很多

不太能理解的話,可以自己在紙上畫幾個點然後不按照方向順序的把點跟點連起來

就能知道為什麼了

好的說了這麼多就直接看效果吧

                  X   Y   X   Y  
clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);

登愣!!! 六邊型出現啦~

動起來

好的既然會剪裁了

我們就讓圖形動起來唄

就用過前面提過的 animation 來做吧

.content{
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  clip-path: polygon(20% 10%,80% 10%,55% 35%,0 35%);;
  animation: move 10s alternate infinite;
}

@keyframes move {
    33% {
        clip-path: polygon(25% 10%,90% 30%,60% 90%,5% 50%);
    }
    66% {
        clip-path: polygon(10% 40%,23% 6%,96% 72%,53% 99%);
    }
}

效果就會是這樣咧

然後可能會覺得奇怪!!

這樣子剪裁把圖型以外的字都剪掉了

那上面那個例子的圖形外面怎麼還有字

因為我們要在建立一個一樣的元素放在他下面

並且把第一個用絕對定位讓他們重疊再一起

<div class="content">
  <p>Lorem100</p>
</div>
<div class="content1">
  <p>Lorem100</p>
</div>
*{
  margin: 0;
}
.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  background-color: #A9ECA2;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  clip-path: polygon(20% 10%,80% 10%,55% 35%,0 35%);
  animation: move 3s alternate infinite;
}
@keyframes move {
    33% {
        clip-path: polygon(25% 10%,90% 30%,60% 90%,5% 50%);
    }
    66% {
        clip-path: polygon(10% 40%,23% 6%,96% 72%,53% 99%);
    }
}
.content1{
  width: 500px;
  height: 500px;
  background-color: #FFE3B0;
  padding: 20px;
  box-sizing: border-box;
}

p{
  font-size: 20px;
}

最後的成果就是這樣啦!!!

挺好玩的一個效果,大家也可以來實作一個不一樣的效果囉

回頭說

話說回來,所以最上面那個 LOGO 的例子就是應用這樣的方式

以金色的 LOGO 為底,然後上面放置一個白色的 LOGO

針對白色 LOGO 做剪裁,然後將他設半透明並且使用 animation 讓它產生動畫效果

就是這樣子囉~


上一篇
追逐老鼠的影子
下一篇
簡單的視差滾動
系列文
菜菜菜的前端學習日誌30

尚未有邦友留言

立即登入留言