記一個頭像高光動畫的CSS實現

前言

久違的，又抽時間寫個博客（づ￣3￣）づ╭❤～~

今天想分享一個小動畫的實現頭像跳動並高光劃過效果展現 你們能夠先點進去看看效果~點擊頭像觸發動畫效果~

或者直接看兩張圖片示意~所有代碼貼在文字底部，或者能夠點擊連接去CodePen

思考

這裏的難度在於高光如何實現？這個動畫我不是第一次作了，覺得都是用切圖實現，正是由於作過屢次，這一次想能不能用純CSS代碼實現呢？

答案是能夠的(●´∀｀●)ﾉ

首先第一步！也是我放棄切圖的第一步！

爲了使你們看清楚。我設了黑底，理論上若是切圖的話是透明底PNG。

這裏不探討CSS實現和PNG哪一種方式更好~

首先我設計了高光的兩種CSS實現方式~

棄用方案一

實現長方形和顏色漸變background: linear-gradient(90deg, transparent 15%, #fff);後，使其旋轉transform: rotate(?deg);。多出來的部分會被頭像overflow:hidden，因此貌似這個高光就垂手可得實現了？可是發現難點就在與實際上寬高和旋轉角度若是要和設計稿徹底切合的話，須要必定的數學平面幾何計算（而我已經還給老師了...）。

棄用方案二

直接實現一個矩形的顏色漸變，而後實現左上角和右下角的小三角進行遮罩裁切，惋惜這方面個人Photoshop功力比CSS功力還好...(CSS裏貌似找不到這個支持：一個元素對另外一個元素的遮罩，若是有小夥伴知道能夠留言告訴我)

實現

當我正掙扎迴歸於切圖方案時，此時我想起了一個CSS屬性clip-path，你們不妨能夠點進這個MDN裏看看這個屬性。關心兼容的同窗也能夠去看看兼容狀況

MDN文檔介紹：clip-path CSS 屬性能夠建立一個只有元素的部分區域能夠顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者做爲一個形狀例如circle().。clip-path屬性代替瞭如今已經棄用的剪切 clip屬性。

這個屬性十分強大。能夠裁切出橢圓形、多邊形、SVG路徑，還能夠根據幾何盒子模型來~

很好！我想要的是一個平行四邊形，clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);，很輕鬆的實現了~

接下來具體的動畫要求是：300ms頭像變大，500ms高光從左至右邊划過去，300ms頭像縮放至本來大小。

這個能夠經過兩個元素的動畫組合實現~ animation: heartbeat 1.1s linear forwards; animation: highlight 1.1s linear forwards;

因爲效果須要適當時機主動召喚出現，因此離不開Javascript的幫助啦。這裏的實現方式就是須要效果時添加動畫className，動畫結束後主動移除className~

你們感興趣能夠看看代碼，PS：CSS使用了less的格式~

代碼

<div class="user-headpic"></div>
複製代碼

@size: 50px;
.user-headpic {
  position: relative;
  display: block;
  width: @size;
  height: @size;
  background: 
    url("https://user-gold-cdn.xitu.io/2018/10/25/166a8fc6cd14bf6f?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1")
    center/cover
    no-repeat;
  border-radius: 100%;
  border: 2px solid silver;
  overflow: hidden;
  &:after {
    .cube(@size);
    .highlight(@size);
  }
  &.starring {
    animation: heartbeat 1.1s linear forwards;
    &:after {
      animation: highlight 1.1s linear forwards;
    }
  }
}

.cube(@w) {
  content: '';
  position: absolute;
  width: @w;
  height: @w;
}

.highlight(@w) {
  position: absolute;
  width: @w;
  height: @w;
  left: -@w;
  top: 0;
  background: linear-gradient(90deg, transparent 15%,  #fff);
  -webkit-clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
  clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
  z-index: 3;
}

@keyframes highlight {
  0 {
    transform: translateX(-@size);
  }
  27.27% {
    transform: translateX(-@size);
  }
  72.73% {
    transform: translateX(2 * @size);
  }
  100% {
    transform: translateX(2 * @size);
  }	
}
@keyframes heartbeat {
  0 {
    transform: scale(1);
  }
  27.27% {
    transform: scale(1.2);
  }
  72.73% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
複製代碼

思考

這個CSS屬性兼容性不是很友好。不過本着學習的精神去玩一下也是不錯的，說不定過幾年用的上了哈哈哈~