本篇文章给大家带来了关于前端按钮的相关知识,其中主要跟大家聊一聊如何用Clip-path实现按钮流动边框动画,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。
苏苏_icon
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::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属性:用来设置left/right/bottom/top
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%); } }
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; }
以上是图文详解Clip-path实现按钮流动边框动画的详细内容。更多信息请关注PHP中文网其他相关文章!