div::after, div::before{ - left: calc(110px - 120px); - top: calc(32px - 42px); - inset: -10px; }为伪元素添加动画效果，实现clip-pa
div::after,
div::before{
- left: calc(110px - 120px);
- top: calc(32px - 42px);
- inset: -10px;
}clip-path：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 inset()定义一个 inset 矩形。
clip-path: inset(20px 50px 10px 0 round 50px);当提供所有四个参数时：
它们表示从参考框向内的顶部、右侧、底部和左侧偏移量，这些偏移量定义了插入矩形边缘的位置。这些参数遵循 margin速记的语法，让您可以为所有四个插图设置一个、两个或四个值。
可选border-radiu参数：
使用 border-radius 速记语法为插入矩形定义圆角
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%);
}
}
animation-delay：
CSS属性指定从将动画应用到元素到开始执行动画之前等待的时间量。动画可以稍后开始，从开头立即开始，或者立即在动画的中途开始。
正值表示动画应该在经过指定的时间量后开始。默认值0s表示动画应在应用后立即开始。
负值会导致动画立即开始，但会在其循环的中途开始。例如，如果您指定-1s动画延迟时间，则动画将立即开始，但会在动画序列开始 1 秒后开始。如果您为动画延迟指定负值，但起始值是隐式的，则起始值是从动画应用于元素的那一刻起获取的。
div::after {
animation-delay: -1.5s;
}
-div::before {
- border: 2px solid orange;
-}
div:hover {
filter: brightness(1.5);
}div{
transition: all 0.5s;
}<!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>以上就是图文详解Clip-path实现按钮流动边框动画的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: 图文详解Clip-path实现按钮流动边框动画
本文链接: https://www.lsjlt.com/news/207416.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0