图文详解Clip-path实现按钮流动边框动画
javascript
摘要：
本篇文章给大家带来了关于前端按钮的相关知识，其中主要跟大家聊一聊如何用Clip-path实现按钮流动边框动画，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。1.实现效果2.实现步骤添加div标签<div>苏苏_icon</div>添加...
本篇文章给大家带来了关于前端按钮的相关知识，其中主要跟大家聊一聊如何用Clip-path实现按钮流动边框动画，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。
1.实现效果
2.实现步骤
- 添加div标签
<div>苏苏_icon</div>
- 添加样式
div {
position: relative;
width: 220px;
height: 64px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
background: #55557f;
cursor: pointer;
border-radius: 10px;
}- 为div添加前后伪元素，为了方便区分，设置前后伪元素的边框颜色不同
div::after,
div::before {
content: "";
position: absolute;
width: 240px;
height: 84px;
border: 2px solid #55557f;
border-radius: 10px;
}
div::before{
border: 2px solid orange;
}- 修改伪元素的定位位置
div::after,
div::before{
+ left: calc(110px - 120px);
+ top: calc(32px - 42px);
}- 可以简写为inset
div::after,
div::before{
- left: calc(110px - 120px);
- top: calc(32px - 42px);
- inset: -10px;
}- 为伪元素添加动画效果，实现clip-path的变化
- 语法：
clip-path: inset(20px 50px 10px 0 round 50px);
- 解释：
- 我们尝试对伪元素设置inset
div::after,
div::before{
+ clip-path: inset(0 0 98% 0);
}
div::after,
div::before{
+ clip-path: inset(0 98% 0 0);
}
div::after,
div::before{
+ clip-path: inset( 98% 0 0 0);
}
div::after,
div::before{
+ clip-path: inset(0 0 0 98% ) ;
}- 添加动画
div::after,
div::before{
+ animation: pathRotate 3s infinite linear;
}@keyframes pathRotate { 0%, 100% {
clip-path: inset(0 0 98% 0);
} 25% {
clip-path: inset(0 98% 0 0);
} 50% {
clip-path: inset(98% 0 0 0);
} 75% {
clip-path: inset(0 0 0 98%);
}
}- 为后伪元素添加动画延迟，形成视差效果
div::after {
animation-delay: -1.5s;
}- 去掉前伪元素的border色值设置
-div::before {
- border: 2px solid orange;
-}- div添加hover事件，就完成啦~
div:hover {
filter: brightness(1.5);
}div{ /* 添加过渡效果 */
transition: all 0.5s;
}3.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clip-path实现按钮流动边框</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
div {
position: relative;
width: 220px;
height: 64px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
background: #55557f;
cursor: pointer;
border-radius: 10px; /* 添加过渡效果 */
transition: all 0.5s;
}
div::after,
div::before {
content: "";
position: absolute;
border: 2px solid #55557f;
width: 240px;
height: 84px;
border-radius: 10px; /* 简写为 */
inset: -10px;
/* 添加动画 */
animation: pathRotate 3s infinite linear;
}
@keyframes pathRotate { 0%, 100% {
clip-path: inset(0 0 98% 0);
} 25% {
clip-path: inset(0 98% 0 0);
} 50% {
clip-path: inset(98% 0 0 0);
} 75% {
clip-path: inset(0 0 0 98%);
}
}
div::after {
animation-delay: -1.5s;
}
div:hover {
filter: brightness(1.5);
}
</style>
<body>
<div>苏苏_icon</div>
</body>
</html>
