坐标轴理解
- x轴就是水平向右的轴
- y轴就是水平向上的轴
- z轴就是垂直屏幕向外的轴
移动
transform: translateX(100px)向水平方向移动100px, 如果是百分比,是相对于元素的宽高来进行比较的 注意: x和y是可以有百分比的, 但是z轴是没有的
z轴移动
transform: perspective(900px);开启透视
实现简单案列
两个表单, 鼠标移动上去的时候给底部添加一个效果, 可以结合渐变做很多好看的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
display: flex;
/* 主轴改为y */
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 300px;
border: 10px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.item {
margin-bottom: 20px;
overflow: hidden;
position: relative;
}
.item::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, blue, green, red, white, black);
bottom: 0;
left: 0;
transform: translate(-100%);
transition: all 1s;
}
.item:hover::after {
transform: translate(0);
}
</style>
</head>
<body>
<div class="box">
<div>
<div class="item"><input type="text" placeholder="请输入账号"></div>
<div class="item"><input type="text" placeholder="请输入密码"></div>
</div>
</div>
</body>
</html>
