妙用 scale 与 transfrom-origin,精准控制动画方向,实现下划线特效
CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。
我们可以使用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏。
transform-origin 让我们可以更改一个元素变形(transform)的原点,transform-origin 属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
<div class='con'><div>Hover Me</div></div>
.con
width 100%
height 100px
position: relative;
div
position: absolute;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
margin: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&::before
content: "";
position: absolute;
left: 0%;
bottom: 0;
width: 200px;
transform: scaleX(0);
height: 2px;
background: deeppink;
z-index: -1;
transition: all .5s;
&:hover::before
transform: scaleX(1);
本效果最最最重要的地方就在于这里,我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。
我们给线条设置一个默认的 transform-origin 记为状态1
hover 的时候,设置另外一个不同的 transform-origin, 记为状态2
所以,当然我们 hover 的时候,会读取状态2的 transform-origin,从该原点开始放大至 scaleX(1),hover 离开的时候,会读取状态1的 transform-origin,从 scaleX(1) 状态缩小至该原点。
因此
.con
width 100%
height 100px
position: relative;
div
position: absolute;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
margin: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&::before
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
transform: scaleX(0);
height: 2px;
background: deeppink;
z-index: -1;
transition: transform .5s;
transform-origin: 100% 0;
&:hover::before
transform: scaleX(1);
transform-origin: 0 0;
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
文章标题:关于 transfrom-origin 的下划线特效
原文链接://www.xiaoyulive.top/books/css_you_might_not_know/transform-origin.html