CSS隱藏元素的10種方法之：使用clip-path

技術頻道 - html技術

CSS隱藏元素的10種方法之：使用clip-path

作者:admin 時間:2022-10-31 20:55:28 瀏覽:

在前面文章我們介紹了可以通過使用transform隱藏元素，本文將繼續介紹另一種CSS隱藏元素的方法：使用clip-path。

實例

CSS隱藏元素的10種方法之：使用clip-path

HTML

<ol class="hide" tabindex="0">
  <li>one</li>
  <li class="hide-item">two</li>
  <li>three</li>
</ol>

<p>鼠標移到任何一個盒子上隱藏盒子two，<br>使用 <b>clip-path: circle(0);</b>。</p>

CSS

/* hide element */
.hide:hover .hide-item,
.hide:focus .hide-item {
  clip-path: circle(0);
}

/* other styles */
body {
  font-family: sans-serif;
  font-size: 100%;
  color: #222;
  background-color: #fff;
}

p {
  text-align: center;
}

.hide {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hide > * {
  flex: 0 0 25%;
  font-size: 2em;
  text-align: center;
  padding: 1em 0;
  margin: 0.2em;
  background-color: #ccc;
  border-radius: 0.5em;
  user-select: none;
}

.hide-item {
  background-color: #f66;
  cursor: pointer;
}

clip-path屬性創建一個剪輯區域，用于確定元素的哪些部分是可見的。使用諸如clip-path: circle(0);將完全隱藏元素的值。

clip-path為有趣的動畫提供了空間，盡管它只能在現代瀏覽器中使用。

度量標準	影響
瀏覽器支持	僅限現代瀏覽器
可訪問性	某些應用程序仍會讀取內容
布局受影響？	否 - 保留原始尺寸
渲染要求	畫
性能	合理的
動畫幀可能嗎？	是的，在現代瀏覽器中
隱藏時可觸發事件嗎？	不

相關文章

clip-path 屬性

clip-path CSS 屬性使用裁剪方式創建元素的可顯示區域。區域內的部分顯示，區域外的隱藏。

語法

/* Keyword values */
clip-path: none;

/* <clip-source> 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;