效果图:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动按钮</title>
<style>
/*按钮居中*/
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color:yellow;
}
/*设置按钮尺寸样式*/
.box {
width: 300px;
height: 60px;
border: 2px solid pink; /*边框属性*/
text-align: center; /*文本对齐方式*/
font-size: 30px;
line-height: 60px;
font-family: sans-serif; /*设置字体*/
}
/*按钮每个字母设置行内块元素,以便单独设置动效*/
.box span {
display: inline-block;
color: blue;
}
/*规定父元素的子元素,奇数在上,偶数在下,交错显示*/
.box span:nth-child(odd) {
transform: translateY(-100%);
}
.box span:nth-child(even) {
transform: translateY(100%);
}
/*伪元素增加每个字母增加一个副本*/
.box span::before {
content: attr(data-text);
position: absolute;
color: red;
}
/*让伪元素字母交错显示,位置与原始元素相对*/
.box span:nth-child(odd):before {
transform: translateY(100%);
}
.box span:nth-child(even)::before {
transform: translateY(-100%);
}
/*为按钮增加鼠标滑过样式,设置缓动时间*/
.box:hover span {
transform: translateY(0);
}
.box span {
transition: 0.5s;
}
/*隐藏容器外的内容*/
.box {
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<span data-text="B">B</span>
<span data-text="U">U</span>
<span data-text="T">T</span>
<span data-text="T">T</span>
<span data-text="O">O</span>
<span data-text="N">N</span>
</div>
</body>
</html>