记一个头像高光动画的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属性兼容性不是很友好。不过本着学习的精神去玩一下也是不错的，说不定过几年用的上了哈哈哈~