新增第224个小实例：按钮边框动效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
f60edf658e
commit
aaab35186f
|
|
@ -231,6 +231,7 @@
|
|||
221. HTML5+CSS3+JS小实例：文字阴影还能这么玩
|
||||
222. HTML5+CSS3+JS小实例：灵动的流边开关切换效果
|
||||
223. HTML5+CSS3+JS小实例：暗紫色Tabbar
|
||||
224. HTML5+CSS3小实例：按钮边框动效
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
min-height: 100vh;
|
||||
/* 弹性布局 居中演示 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
.container{
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
/* 垂直排列 */
|
||||
flex-direction: column;
|
||||
/* 间隙 */
|
||||
gap: 80px;
|
||||
}
|
||||
.button{
|
||||
/* 自定义变量 */
|
||||
/* 边框的偏移量 */
|
||||
--offset:10px;
|
||||
/* 边框的厚度 */
|
||||
--border-size:2px;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #6c98de;
|
||||
/* 默认背景透明 */
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
/* 通过内阴影的方式绘制边框 */
|
||||
/* currentColor==color: #6c98de; */
|
||||
box-shadow: inset 0 0 0 var(--border-size) currentColor;
|
||||
/* 设置背景改变时的过渡效果 */
|
||||
transition: background 0.8s ease;
|
||||
}
|
||||
.button:hover{
|
||||
/* 悬停改变背景 */
|
||||
background: rgba(100,0,0,0.065);
|
||||
}
|
||||
/* 外边框统一样式 */
|
||||
.button-h,
|
||||
.button-v{
|
||||
position: absolute;
|
||||
top:var(--h-offset,0);
|
||||
right:var(--v-offset,0);
|
||||
bottom:var(--h-offset,0);
|
||||
left:var(--v-offset,0);
|
||||
/* 过渡 */
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
.button-h{
|
||||
--v-offset:calc(var(--offset) * -1);
|
||||
border-top:var(--border-size) solid currentColor;
|
||||
border-bottom:var(--border-size) solid currentColor;
|
||||
}
|
||||
.button-v{
|
||||
--h-offset:calc(var(--offset) * -1);
|
||||
border-left:var(--border-size) solid currentColor;
|
||||
border-right:var(--border-size) solid currentColor;
|
||||
}
|
||||
.button-h::before,
|
||||
.button-v::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
/* 边框继承父元素 */
|
||||
border: inherit;
|
||||
}
|
||||
.button-h::before{
|
||||
top:calc(var(--v-offset) - var(--border-size));
|
||||
bottom:calc(var(--v-offset) - var(--border-size));
|
||||
left:calc(var(--v-offset) * -1);
|
||||
right:calc(var(--v-offset) * -1);
|
||||
}
|
||||
.button-v::before{
|
||||
top:calc(var(--h-offset) * -1);
|
||||
bottom:calc(var(--h-offset) * -1);
|
||||
left:calc(var(--h-offset) - var(--border-size));
|
||||
right:calc(var(--h-offset) - var(--border-size));
|
||||
}
|
||||
/* 悬停样式 */
|
||||
.button:hover .button-h{
|
||||
transform: scaleX(0);
|
||||
}
|
||||
.button:hover .button-v{
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>按钮边框动效</title>
|
||||
<link rel="stylesheet" href="224.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="button">
|
||||
点赞
|
||||
<div class="button-h"></div>
|
||||
<div class="button-v"></div>
|
||||
</div>
|
||||
<div class="button">
|
||||
关注
|
||||
<div class="button-h"></div>
|
||||
<div class="button-v"></div>
|
||||
</div>
|
||||
<div class="button">
|
||||
收藏
|
||||
<div class="button-h"></div>
|
||||
<div class="button-v"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue