菜单

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

2019年5月2日 - Ajax

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

2018/04/25 · CSS · 1
评论
·
scale,
transfrom-origin

正文小编: 伯乐在线
chokcoco
。未经小编许可,禁止转载!
应接插手伯乐在线 专栏撰稿人

上次发完 不敢相信 无法相信的纯 CSS
导航栏下划线跟随效果
 那篇小说之后,大多相爱的人找作者谈谈,惊讶CSS 的诡异。

然后后日,群里一位恋人问到了3个和这一个效果比较接近的效应,问哪些

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

叙述很难知晓,看看原本的成效:

图片 1

1.scale(x,y)对成分举行缩放
①x表示水平方向,y表示竖直方向
②y是一个可选参数,如果不写的话,X,Y两个方向缩放一样

transform:scale(1.0,1.2)//水平方向1.0,竖直方向1.2倍

难题所在

先是眼看到这几个意义,作者的内心毫无波澜。以为只是轻易的二个下划线 hover
效果,经过朋友提示,才发觉,那么些动画效果中,下划线是从一端进入,从此外1端离开的。而且,那几个hover 动画是纯 CSS 达成的。

图片 2

先不挂念地点说的修改需求,先想1想,若是就是还原上述功能,仅仅使用
CSS,该如何是好啊?

 

二.scaleX(number)对成分只在x轴(水平方向)进行缩放
①默认值为1,基点一样在元素中心位置,可以通过transform-origin来改变基点

transform:scaleX(1.2)//水平方向1.2倍

平复成效

嗯,平常来讲,大家1个 hover
效果,只怕就是从哪儿来,回哪个地方去,超过一半的应该是这么的:

图片 3

DEMO1

今昔,难点就在于如何在 hover 离开的时候,退换动画行进的主旋律。

上边大家将二个 hover 动画分解为 三 个部分:

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

可是,对于1个 hover
效果来说,不奇怪的话,唯有初叶状态,和hover状态三种。恐怕我们的代码是这么:

div { xxxx… } div:hover { xxxx… }

1
2
3
4
5
6
7
div {
    xxxx…
}
div:hover {
    xxxx…
}

对于三个 hover transition 动画,它应当是从:

就此,须求求有1种方法,能够使得 hover
动画的进去与相差产生二种分裂等的意义,达成:

 

叁.scaleY(number)对成分只在y轴(竖直方向)进行缩放
①默认值为1,基点一样在元素中心位置,可以通过transform-origin来改变基点

transform:scaleY(1.2)//竖直方向1.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); transrform-origin:100% 0; } div:hover::before { transform:
scaleX(1); transform-origin:0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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);
transrform-origin:100% 0;
}
 
div:hover::before {
transform: scaleX(1);
transform-origin:0 0;
}

图片 4

DEMO2

啊?为何是要用 transform: scale() 来完结线条的卡通?因为它能够合作 transform-origin 达成动画的两样运动方向:

 

transform-origin 落成线条运动方向

transform-origin 让大家可以退换七个要素变形(transform)的原点,transform-origin 属性能够运用贰个,四个或八个值来内定,其中各种值都表示3个偏移量。
未有显著定义的舞狮将重新设置为其对应的初叶值。

本效果最最最要害的地方就在于这里,大家选用 transform-origin 去改变 transform: scale() 的原点达成线条运动的样子。

  1. 咱俩给线条设置2个默许的 transform-origin 记为状态1
  2. hover 的时候,设置其余3个不一致的 transform-origin, 记为状态二

为此,当然我们 hover
的时候,会读取状态2的transform-origin,从该原点初阶推广至 scaleX(1),hover
离开的时候,会读取状态一的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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 ,让动画的进去与相差发生了两种不相同的效劳,五个例外的势头。

如此一来,也就顺风落实了我们想要的效应,撒花:

图片 5

DEMO3

瞩目,这里运用了 transform-origin 去改变 transform: scale() 的原点落成线条运动的取向,而并未有借助诸如 position 位移,transform: translate(),或者margin 等职责属性去改造线条所在的职位。

之所以,风趣的是,线条其实未有发生过其余位移,这里其实也是障眼法,让它看上去,它相仿在运动。

 

拓展缓延长伸

哦,有了上述措施,也正是 transform: scale() 配合 transform-origin ,大家得以开头随机改换动画的上马与截止状态了。把她们采取到任何职能之上,简单的多少个暗中提示效果:

图片 6

 

DEMO4

值得注意的点

还有多少个点是相比风趣的,大家能够品味尝试,思索思虑:

 

最后

本办法自个儿个人最早见于 Css菜单悬停成效。如果你有越来越好的办法接待提出协同切磋。

更加多非凡 CSS 才干作品汇总在自个儿的 Github —
iCSS
 ,持续立异,招待点个 star
订阅收藏。

好了,本文到此截至,希望对你有帮带 🙂

倘诺还有怎么样疑难依旧提出,能够多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏帮忙本身写出越来越多好小说,多谢!


打赏小编

打赏帮忙本身写出更多好作品,感激!

任选一种支付格局

图片 7
图片 8

1 赞 3 收藏 1
评论

关于小编:chokcoco

图片 9

经不住流年似水,逃可是此间少年。

个人主页
·
作者的稿子
·
63
·
   

图片 10

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图