妙用 scale 与 transfrom-origin,精准控制动画方向

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。

然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何

将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。

描述很难理解,看看原本的效果:

难点所在

第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这个 hover 动画是纯 CSS 实现的。

先不考虑上面说的修改需求,先想一想,如果就是还原上述效果,仅仅使用 CSS,该如何做呢?

还原效果

嗯,正常而言,我们一个 hover 效果,可能就是从哪里来,回哪里去,大部分的应该是这样的:

现在,难点就在于如何在 hover 离开的时候,改变动画行进的方向。

下面我们将一个 hover 动画分解为 3 个部分:

  1. hover 进入状态
  2. hover 停留状态
  3. hover 离开状态

但是,对于一个 hover 效果而言,正常来说,只有初始状态,和hover状态两种。可能我们的代码是这样:

div {
    xxxx...
}

div:hover {
    xxxx...
}

对于一个 hover transition 动画,它应该是从:

  • 正常状态 -> hover状态 -> 正常状态 (三个步骤,两种状态)

所以,必须要有一种方法,能够使得 hover 动画的进入与离开产生两种不一样的效果,实现:

  • 状态1 -> hover状态 -> 状态2 (三个步骤,三种状态)

实现控制动画方向的关键点

所以,这里的关键点就在于(划重点):

使得 hover 动画的进入与离开产生两种不一样的效果 。

接下来,也就是本文的关键所在,使用 transform: scale() 以及 transform-origin 实现这个效果。

transform: scale() 实现线条运动

transform: scale 大家应该都很熟悉了,通俗来说是用于缩放,用官方的话说,就是:

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。

这里我们使用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏,它的 CSS 代码简单来看,可能是这样:

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 2px;
    background: deeppink;
    transition: transform .5s;
    transform: scaleX(0);
}

div:hover::before {
    transform: scaleX(1);
}

嗯?为什么是要用 transform: scale() 来实现线条的动画?因为它可以配合 transform-origin 实现动画的不同运动方向:

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形(transform)的原点,transform-origin 属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

本效果最最最重要的地方就在于这里,我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

  1. 我们给线条设置一个默认的 transform-origin 记为状态1
  2. hover 的时候,设置另外一个不同的 transform-origin, 记为状态2

所以,当然我们 hover 的时候,会读取状态2的transform-origin,从该原点开始放大至 scaleX(1),hover 离开的时候,会读取状态1的transform-origin,从scaleX(1)状态缩小至该原点。

嗯,CSS代码大概是这样:

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 2px;
    background: deeppink;
    transition: transform .5s;
    transform: scaleX(0);
    transform-origin: 100% 0;
}

div:hover::before {
    transform: scaleX(1);
    transform-origin: 0 0;
}

这里,我们巧妙的通过 hover 状态施加了一层新的 transform-origin ,让动画的进入与离开产生了两种不同的效果,两个不同的方向。

如此一来,也就顺利实现了我们想要的效果,撒花:

注意,这里使用了 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向,而没有借助诸如 position 位移,transform: translate(),或者 margin 等位置属性去改变线条所在的位置。

所以,有趣的是,线条其实没有产生过任何位移,这里其实也是障眼法,让它看上去,它好像在移动。 

拓展延伸

嗯,有了上述方法,也就是 transform: scale() 配合 transform-origin ,我们可以开始随意改变动画的初始与结束状态了。把他们运用到其他效果之上,简单的几个示意效果:

值得注意的点

还有几个点是比较有意思的,大家可以尝试尝试,思考思考:

  • 尝试改变两种状态的 transition-timing-function 缓动函数,可以让动画更加流畅具有美感;
  • 注意一下,线条的 transition 设置的是 transition: transform .5s 而不是 transition: all .5s,体验一下两种写法所产生的不同效果。

最后

本方法我个人最早见于 Css菜单悬停效果。如果你有更好的方法欢迎提出共同探讨。

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web编程技术分享

三分钟学会用 js + css3 打造酷炫3D相册

4135
来自专栏带你撸出一手好代码

px转vw和vh的工具(对前端同学有用)

CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPho...

4468
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

62213
来自专栏黑白安全

web前端技术课程内容详解之语义化标签的理解

在学习HTML阶段的最后,我们会涉及到学习语义化标签,明明用div等标签就可以构成页面,那么为什么还会有语义化标签的存在?语义化标签到底是什么?学好语义化标签又...

622
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

1544
来自专栏葡萄城控件技术团队

给萌新的Flexbox简易入门教程

近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flex...

612
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

42910
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

2166
来自专栏达摩兵的技术空间

动态内容的等高布局实现

首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

743
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

923

扫码关注云+社区