大家好,我是 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%;
}
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
[1] 原文阅读
我是 Just,这里是「设计师工作日常」,求点赞求关注!