卡卡網(wǎng)

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

實(shí)例

demodownload

HTML

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

<p>鼠標(biāo)移到任何一個(gè)盒子上隱藏盒子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屬性創(chuàng)建一個(gè)剪輯區(qū)域，用于確定元素的哪些部分是可見的。使用諸如clip-path: circle(0);將完全隱藏元素的值。

clip-path為有趣的動(dòng)畫提供了空間，盡管它只能在現(xiàn)代瀏覽器中使用。

相關(guān)文章

• CSS隱藏元素的10種方法之：縮小尺寸
• CSS隱藏元素的10種方法之：使用::after偽元素
• CSS隱藏元素的10種方法之：使用position屬性
• CSS隱藏元素的10種方法之：使用display
• CSS隱藏元素的10種方法之：使用visibility
• CSS隱藏元素的10種方法之：使用clip-path
• CSS隱藏元素的10種方法之：使用transform
• CSS隱藏元素的10種方法之：color Alpha 透明度
• CSS隱藏元素的10種方法之：opacity和filter: opacity()

clip-path 屬性

clip-path CSS 屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。

語法

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

clip-path 屬性指定為下面列出的值的一個(gè)或多個(gè)值的組合。

備注： CSS 計(jì)算值不為 none 時(shí)，會(huì)創(chuàng)建新的層疊上下文，就像 CSS opacity 的值不為 1 時(shí)那樣。

相關(guān)文章

• CSS Grid 和 CSS Flexbox 的區(qū)別
• CSS+JS實(shí)現(xiàn)的顏色漸變可拖動(dòng)滑塊
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫
• 三種在CSS中排除(不選擇)第一個(gè)子標(biāo)簽的方法
• [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
• [示例]如何使用CSS將文本環(huán)繞在圖像周圍
• [3示例]如何用CSS實(shí)現(xiàn)文本環(huán)繞圖像
• 純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表
• CSS如何創(chuàng)建淡入背景動(dòng)畫
• 如何為圖像、按鈕和文本在懸停時(shí)添加淡入過渡效果

標(biāo)簽: css  CSS隱藏元素  clip-path