<div class="container">
<div class="icon"></div>
<div class="text">AI Tools</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
.container {
margin: 150px;
display: inline-flex;
flex-direction: row;
height: 32px;
align-items: center;
padding: 5px;
overflow: hidden;
background: rgba(0,0,0,0.6);
border-radius: 8px;
&:hover {
.text {
transform: translateX(0%)
}
}
.icon {
border: 1px solid #ccc;
margin: 5px;
width: 16px;
height: 16px;
}
.text {
height: 32px;
line-height: 32px;
overflow: hidden;
transition: transform 0.3s;
transform: translateX(-100%)
}
}
JS
格式化