CSS的clip-path属性使用
2022-06-28
Cikayo
前言
clip-path
CSS
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
基本语法
clip-path: clip-source | basic-shape | geometry-box | none;
属性说明
clip-source = url
basic-shape = inset | circle | ellipse | polygon | path
geometry-box = shape-box | fill-box | stroke-box | view-box
属性详解
使用实例:
clip-path: none;
/* <basic-shape> values */
clip-path: url(resources.svg#c1);
/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;
- url():引用
SVG
的<clipPath>
元素 - inset():定义一个矩形。可以传入5个参数,分别对应
top
,right
,bottom
,left
的裁剪位置,round radius
(可选,圆角) - circle() : 定义一个圆 。可以传人2个可选参数:半径和圆心位置;
- ellipse() : 定义一个椭圆 。可以传人3个可选参数:椭圆的X轴半径(默认是宽度的一半,支持百分比),椭圆的Y轴半径(默认是高度的一半,支持百分比),椭圆中心位置(默认是元素的中心点)
- polygon() : 定义一个多边形 。后面的每对参数表示多边形的顶点坐标(X,Y),也就是连接点。
- path():定义一个任意形状(使用一个可选的 SVG 填充规则和一个 SVG 路径定义)。
实现边框线条动画
先看效果
关键点
<div class="box">Hello</div>
.box {
position: relative;
margin: auto;
width: 120px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
border: 2px solid gold;
border-radius: 10px;
background: gold;
transition: all .3s;
cursor: pointer;
}
.box:hover {
filter: contrast(1.1);
}
.box:active {
filter: contrast(0.9);
}
.box::before,
.box::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid gold;
transition: all .5s;
animation: clippath 3s infinite linear;
border-radius: 10px;
}
.box::after {
animation: clippath 3s infinite -1.5s linear;
}
@keyframes clippath {
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%);
}
}
参考链接:
MDN 关于 clip-path :https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
clip-path 实现边框线条动画 2:https://csscoco.com/inspiration/#/./clippath/clippath-border-line-radius