android 高光动画,记一个头像高光动画的CSS实现

本文作者分享了一次使用纯CSS实现动态效果的过程,包括头像放大、高光滑动和缩放,主要展示了如何利用CSS动画、clip-path属性及少部分JavaScript来完成头像互动效果,挑战了CSS的边界并学习了新的技术clip-path。
摘要由CSDN通过智能技术生成

前言

久违的,又抽时间写个博客(づ ̄3 ̄)づ╭❤~~

今天想分享一个小动画的实现头像跳动并高光划过效果展示

大家可以先点进去看看效果~点击头像触发动画效果~

或者直接看两张图片示意~全部代码贴在文字底部,或者可以点击链接去CodePen

8109f95a1cbe240fc177c1c9463f0e25.png

01e8cccb75cf40b6535e1ac2eed1db20.png

1730f04b522ad39494353707eeee9fb9.png

思考

这里的难度在于高光如何实现?这个动画我不是第一次做了,以为都是用切图实现,正是因为做过多次,这一次想能不能用纯CSS代码实现呢?

答案是可以的(●´∀`●)ノ

首先第一步!也是我放弃切图的第一步!

c95c52f48f3adfeed5c0ebddf130d85d.png

为了使大家看清楚。我设了黑底,理论上如果切图的话是透明底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的格式~

代码

复制代码@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属性兼容性不是很友好。不过本着学习的精神去玩一下也是不错的,说不定过几年用的上了哈哈哈~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值