整体效果
这个按钮效果主要使用
:hover伪选择器以及transition过渡属性来实现两个子元素上下过渡的效果。
此效果可以在主入口按钮、详情或者更多等按钮处使用，增加一些鼠标的交互效果。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<button>
<span class="defalut">鼠标放上来</span>
<span class="hover">点我吧</span>
</button>
button标签主体，包裹两个子元素span，分别为.defalut和.hover。
css 部分代码
*{
transition: .5s;
}
button{
width: 110px;
height: 42px;
color: #ffffff;
background-color: #457356;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s linear;
position: relative;
overflow: hidden;
}
.defalut,.hover{
width: 100%;
height: 100%;
line-height: 42px;
letter-spacing: 2px;
display: block;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.hover{
position: absolute;
left: 0;
top: 100%;
}
button:hover .defalut{
transform: translateY(-100%);
}
button:hover .hover{
top: 0;
}
css 部分主要通过
:hover伪选择器来分别设置两个span子元素的样式，然后配合transform以及定位来实现两个span的上下移动。
注意：全局定义了 transition: .5s
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>按钮文字上下滑动</title>
</head>
<body>
<div class="app">
<button>
<span class="defalut">鼠标放上来</span>
<span class="hover">点我吧</span>
</button>
</div>
</body>
</html>
css 样式
/** style.css **/
*{
margin: 0;
padding: 0;
list-style: none;
transition: .5s;
}
html,body{
background-color: #efefef;
color: #fff;
font-size: 14px;
}
.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
button{
width: 110px;
height: 42px;
color: #ffffff;
background-color: #457356;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s linear;
position: relative;
overflow: hidden;
}
.defalut,.hover{
width: 100%;
height: 100%;
line-height: 42px;
letter-spacing: 2px;
display: block;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.hover{
position: absolute;
left: 0;
top: 100%;
}
button:hover .defalut{
transform: translateY(-100%);
}
button:hover .hover{
top: 0;
}
页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
[1] 原文阅读
我是 Just，这里是「设计师工作日常」，求点赞求关注！skr~ skr~
