大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个交互感比较强的动效按钮。
最新文章通过公众号「设计师工作日常」发布。
(目录)
整体效果
知识点： ①
content: attr(...)的用法 ② 伪元素:before、:after③animation动画 ④transition过渡属性 ⑤position定位
思路： 透明按钮，鼠标悬浮时，让四周的边框通过动画效果出现，过渡时显示按钮阴影。
交互感比较强的一个动效按钮。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<div class="btn60" data-text="更多详情">
<div class="border-tb-60"></div>
<div class="border-lr-60"></div>
</div>
.btn60整体按钮标签，增加data-text自定义属性；下面两个子元素.border-tb-60和.border-lr-60用来做边框元素。
css 部分代码
.btn60{
width: 124px;
height: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: .3s linear;
}
.btn60:after{
content: attr(data-text);
position: relative;
}
.border-tb-60:before{
content: '';
width: 0;
height: 3px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.border-tb-60:after{
content: '';
width: 0;
height: 3px;
background-color: black;
position: absolute;
top: 47px;
right: 0;
}
.border-lr-60:before{
content: '';
width: 3px;
height: 0;
background-color: black;
position: absolute;
bottom: 0;
left: 0;
}
.border-lr-60:after{
content: '';
width: 3px;
height: 0;
background-color: black;
position: absolute;
top: 0;
left: 121px;
}
.btn60:hover{
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn60:hover .border-tb-60:before,.btn60:hover .border-tb-60:after{
animation: eff60 .3s linear forwards;
}
.btn60:hover .border-lr-60:before,.btn60:hover .border-lr-60:after{
animation: eff601 .3s linear forwards;
}
@keyframes eff60{
to{
width: 100%;
}
}
@keyframes eff601{
to{
height: 100%;
}
}
1、定义整体按钮
.btn60的大小等样式，定义flex布局，定义内容平行垂直居中；利用:after创建伪元素.btn60:after，并用content搭配attr(...)获取data-text的值，创建文字元素。
2、当鼠标状态
:hover时，整体按钮增加阴影效果box-shadow；给.btn60增加过渡属性transition，定义参数transition: .3s linear，让阴影显示增加过渡效果。
3、基于标签
.border-tb-60和.border-lr-60分别创建伪元素:before和:after，定义为按钮的四周边框；然后使用position: absolute相对定位，将上下边框分别定位到靠左和靠右，左右边框分别定位到靠下和靠上；上下边框定义样式高度为3px，左右边框定义样式宽度为3px。
4、根据鼠标状态，当
:hover鼠标悬浮到按钮上方时，分别给四周的边框伪元素增加一个动画animation，分别为eff60和eff601，上下的边框伪元素的动画是让宽度从0变化到100%；左右的边框伪元素的动画是让高度从0变化到100%。
5、这里的动画属性注意设置为
forwards，让动画停止在最后一帧，这样四周的边框就不会在动画结束后消失。
注意： 伪元素边框进行定位时，注意其 top 、left 、 right 、 bottom 的灵活使用。
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>边框动效按钮</title>
</head>
<body>
<div class="app">
<div class="btn60" data-text="更多详情">
<div class="border-tb-60"></div>
<div class="border-lr-60"></div>
</div>
</div>
</body>
</html>
css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn60{
width: 124px;
height: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: .3s linear;
}
.btn60:after{
content: attr(data-text);
position: relative;
}
.border-tb-60:before{
content: '';
width: 0;
height: 3px;
background-color: black;
position: absolute;
top: 0;
left: 0;
}
.border-tb-60:after{
content: '';
width: 0;
height: 3px;
background-color: black;
position: absolute;
top: 47px;
right: 0;
}
.border-lr-60:before{
content: '';
width: 3px;
height: 0;
background-color: black;
position: absolute;
bottom: 0;
left: 0;
}
.border-lr-60:after{
content: '';
width: 3px;
height: 0;
background-color: black;
position: absolute;
top: 0;
left: 121px;
}
.btn60:hover{
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn60:hover .border-tb-60:before,.btn60:hover .border-tb-60:after{
animation: eff60 .3s linear forwards;
}
.btn60:hover .border-lr-60:before,.btn60:hover .border-lr-60:after{
animation: eff601 .3s linear forwards;
}
@keyframes eff60{
to{
width: 100%;
}
}
@keyframes eff601{
to{
height: 100%;
}
}
页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
我是 Just，这里是「设计师工作日常」，求点赞求关注！
