多种样式的css遮罩效果-html代码-BFW代码库

代码语言：html

代码描述：多种样式的css遮罩效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
  font: normal 100%/1.5 sans-serif;
  background: #1F2933;
  color: white;
}

html,
body {
  height: 100%;
  margin: 1rem;
  padding: 0;
}

figure {
  margin: 0;
}

figcaption {
  text-align: center;
}

code {
  color: #e19123;
}

@media screen and (min-width: 400px) {
  body {
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 5px;
  }

  div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 1;
  }
  div:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 2;
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 20px;
  }
  div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 3;
  }
  div:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 4;
    display: grid;
    grid: auto/repeat(2, 1fr);
    grid-gap: 20px;
  }
}
@media screen and (min-width: 720px) {
  body {
    display: grid;
    grid: auto/repeat(6, 1fr);
    grid-gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
  }

  div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 1;
  }
  div:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 2;
    display: grid;
    grid: auto/repeat(4, 1fr);
  }
  div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 3;
  }
  div:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 4;
    display: grid;
    grid: auto/repeat(4, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  body {
    display: grid;
    grid: auto/repeat(3, 1fr);
    grid-gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
  }

  div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 1;
  }
  div:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 2;
    display: grid;
    grid: auto/repeat(5, 1fr);
  }
  div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 3;
  }
  div:nth-child(4) {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row: 4;
    display: grid;
    grid: auto/repeat(5, 1fr);
  }
}
</style>

</head>
<body translate="no">

<div>
<h2><code>&lt;mask&gt;</code></h2>
</div>
<div>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<radialGradient id="radial-gradient">
<stop stop-color="white" offset="0" />
<stop stop-color="black" offset="1" />
</radialGradient>
<pattern id="pattern" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="5" fill="url(#radial-gradient)" />
<animate attributeType="XML" attributeName="x" type="translate" from="-100" to="100" dur="2s" fill="freeze" repeatCount="indefinite" />
</pattern>
<mask id="pattern-mask" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="url(#pattern)" />
</mask>
</defs>
<circle cx="50" cy="50" r="50" fill="#732797" mask="url(#pattern-mask)" />
</svg>
<figcaption>Pattern Mask w/Shapes & SMIL</figcaption>
</figure>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<mask id="SVGMask" mask-type="luminance" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<style>
					#rect {
						mask-image: url(#SVGMask);
						mask-mode: luminance;
					}
					</style>
<radialGradient id="radialFill">
<stop stop-color="white" offset="0" />
<stop stop-color="black" offset="1" />
</radialGradient>
<circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5" />
</mask>
</defs>
<rect id="rect" width="100" height="100" fill="#78289E" />
</svg>
<figcaption>Mask Mode / Mask Image : Bundled Styles</figcaption>
</figure>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<mask id="txt-mask">
<radialGradient id="gradient-fill">
<stop stop-color="white" offset="0" />
<stop stop-color="black" offset="1" />
</radialGradient>
<text x="0" y="50" font-family="Arial" fill="url(#gradient-fill)" font-size="20">SVG Mask</text>
</mask>
</defs>
<rect width="100" height="100" fill="#B63FC4" mask="url(#txt-mask)" />
</svg>
<figcaption>Text Mask</figcaption>
</figure>
<figure>
<svg xmlns="http://.........完整代码请登录后点击上方下载按钮下载查看