这是我从前端客上看到的一个特效,也就是使用scaleX()实现从中间延展的下划线,缩放是从元素的中间开始的。这是我从没有想到的,X轴缩放!
在这个例子中还使用到了hover对兄弟元素的操控哦。
下面让我们一起来看看这是如何实现的吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
margin: 0 auto;
}
.a{
width: 100px;
height: 30px;
background: red;
}
.b{
width: 2px;
height: 2px;
background: blue;
margin-top: 30px;
visibility: hidden;
transition: 2s;
}
.a:hover + .b{
visibility: visible;
transform: scaleX(50);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>