妙用 scale 与 transfrom-origin,精准控制动画方向
上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。
然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何
将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。
描述很难理解,看看原本的效果:
难点所在
第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这个 hover 动画是纯 CSS 实现的。
先不考虑上面说的修改需求,先想一想,如果就是还原上述效果,仅仅使用 CSS,该如何做呢?
还原效果
嗯,正常而言,我们一个 hover 效果,可能就是从哪里来,回哪里去,大部分的应该是这样的:
现在,难点就在于如何在 hover 离开的时候,改变动画行进的方向。
下面我们将一个 hover 动画分解为 3 个部分:
- hover 进入状态
- hover 停留状态
- 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()
的原点实现线条运动的方向。
- 我们给线条设置一个默认的
transform-origin
记为状态1 - 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 订阅收藏。
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3ly2fi88twowo
妙用 scale 与 transfrom-origin,精准控制动画方向的更多相关文章
- CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...
- Cocos2d-x游戏开发CCBAnimationManager控制动画
CocosBuilder能方便的编辑各种动画.大部分动画都是以独立片段的形式存在的. 须要由程序来控制何时播放. 管理ccbi文件的动画播放有个专门的类:CCBAnimationManager 大致的 ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- WPF控制动画开始、停止、暂停和恢复
1.闲言 好久也没更新一博客了,自己有点发懒,同时确实这几个月来也有点忙.风机监测软件,项目中,有这样一个小需求:正常风机在旋转的时候,上位机软要做一个风机的图片,让它不停地旋转,一但检测到下面风机停 ...
- (转)在Unity3D中控制动画播放
用Unity3D也算是好久了,但是每次做项目总还是能学到新的东西.这次做一个TPS的项目就遇到了这样一个问题,如何同时在上下半身播放不同的动画?解决方法其实是很简单,但由于对于动画资源的了解不足导致问 ...
- vue用js部分控制动画实现
上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...
- js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动 一.总结 一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...
- css3的transform-origin配合scale,控制动画,实现各种hover效果
1.底部画线,从左边开始,右边结束 html: <div class="silde-txt">底部划线</div> css: <style>.s ...
- JUC——线程同步锁(Condition精准控制)
在进行锁处理的时候还有一个接口:Condition,这个接口可以由用户来自己进行锁的对象创建. Condition的作用是对锁进行更精确的控制. Condition的await()方法相当于Objec ...
随机推荐
- mysql-5.7.12安装
CentOS 7的yum源中貌似没有正常安装mysql时的mysql-sever文件,需要去官网上下载 # wget http://dev.mysql.com/get/mysql-communit ...
- KMP(构建next数组)
字符串匹配算法KMP, 核心思想是尽可能利用已经匹配的结果, 跳过尽可能多的不需要匹配的情况 重点和难点都在next数组的建立上 1. KMP算法的next数组求解 以模式串 a b a c a b ...
- 爬虫(BeautifulSoup--select--class的选择)
<div class="item name" title="中央公园"> <a href="/Attraction_Review-g ...
- 发布利用 Qt Assistant来做帮助系统的程序遇到的问题
最近,一直在做反演初始模型可视化建模的软件 model Constraint,最后的步骤就是利用 Qt Assistant为自己的程序制作帮助系统. 1.<Qt Creator快速入门>和 ...
- windows下apache报os 10048错误
在apache的bin目录下运行httpd -k install,报错os10048 (错误信息是跟443端口有关),网上的答案说的是改掉httpd.conf里的默认端口或者关闭占用端口的进程,默认端 ...
- 20162330 第十二周 蓝墨云班课 hash
题目要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85,75,57,60,65,(你的8位学号 ...
- Storm概念讲解和工作原理介绍
Strom的结构 Storm与传统关系型数据库 传统关系型数据库是先存后计算,而storm则是先算后存,甚至不存 传统关系型数据库很难部署实时计算,只能部署定时任务统计分析窗口数据 ...
- Tornado 网站demo 一
web服务器的工作过程 创建 listen socket, 在指定的监听端口, 等待客户端请求的到来 listen socket 接受客户端的请求, 得到 client socket, 接下来通过 c ...
- Winserver+Apache+django部署
废话不多说,干活直接上. winserver2012 + django2.0.1 + apache 部署过程 python ==> 3.4 64位 https://www.python.org/ ...
- 九、Python发送QQ邮件(SMTP)
看了廖雪峰老师的教程: 一封电子邮件的旅程就是 发件人 -> MUA -> MTA -> MTA -> 若干个MTA -> MDA <- MUA <- 收件人 ...