使用 CSS 遮罩和自定义属性实现图像碎片效果

最新推荐文章于 2022-08-22 09:01:00 发布
最新推荐文章于 2022-08-22 09:01:00 发布
阅读量999 收藏 4
点赞数 1
文章标签： css css3 scss 前端
原文链接：https://www.mybj123.com/12567.html
版权

前言

今天我们要实现一个这样的效果：首先我们页面上有一张完整的图像，然后当我们鼠标滑过图像的时候，让它一次消失一块，就像漂浮在微小的碎片中一样，从而达到碎片消失的效果。

具体实现方式不需要JavaScript处理，也不需要SVG。只有一个img和一些SCSS。

先看一个效果：
在这里插入图片描述
很酷，对吧？当然，但问题是。您必须在Chrome、Edge或Opera中查看这一点，因为这些浏览器是目前唯一支持@property的浏览器，这是实现这一想法的关键组件。我们不会让它阻止我们，因为这是一个很好的机会，可以让我们接触到很酷的 CSS 功能，例如蒙版和借助@property。

完整代码如下：

HTML代码：

<img src="https://media.mybj123.com/wp-content/uploads/2021/08/1629093342-aa844bb3422dd98.jpg">

SCSS代码：

$x:20;  /*  number of row */
$y:20;  /*  number of columns */
$s:0.8; /* speed factor */

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}
@function transition($i,$j) {
  @return ($s*random())+s ($s*random())+s;
}

@mixin image() {
    $all_t: ();
    $all_m: ();
    @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
         $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
      }
    }
    transition: $all_t;
     -webkit-mask: $all_m;
     mask: $all_m;
}

img {
  @include image();
  -webkit-mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  -webkit-mask-repeat:no-repeat;
  mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  mask-repeat:no-repeat;
}

img:hover {
  @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         --c-#{$i}-#{$j}: 0;
      }
    }
}

body {
  background:pink;
}

遮罩的东西

遮罩有时很难概念化，常常与剪裁混淆。底线是：遮罩是图像。当图像作为遮罩应用于元素时，图像的任何透明部分都允许我们直接看到元素。任何不透明部分都将使图元完全可见。

遮罩的工作方式与不透明度相同，但位于同一元素的不同部分。这与剪切不同，剪切是一种路径，路径之外的所有内容都被简单地隐藏。掩蔽的优点是我们可以在同一个元素上有我们想要的任意多的掩蔽层 — 类似于我们如何在背景图像上链接多个图像。

由于遮罩是图像，我们可以使用CSS渐变来制作它们。让我们举一个简单的例子来更好地理解这个技巧。

img {
  mask:
    linear-gradient(rgba(0,0,0,0.8) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,0.5) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
}

在这里，我们在图像上定义了两个遮罩层。它们都是纯色，但 alpha 透明度值不同。上面的语法可能看起来很奇怪，但它是一种简化的编写方式linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8))。

值得注意的是，我们使用的颜色无关紧要，因为默认遮罩模式是alpha，alpha值是唯一相关的东西。我们的梯度可以是linear-gradient(rgba(X,Y,Z,0.8) 0 0)，其中 X，Y和Z是随机值。

每个遮罩层等于50% 100%（或图像的半宽和全高）。一个面罩覆盖左侧，另一个覆盖右侧。最后，我们有两个不重叠的遮罩覆盖了图像的整个区域，正如我们之前讨论的，每个遮罩都有一个不同定义的 alpha 透明度值。
在这里插入图片描述
由上图可以看出使用两个线性渐变创建的两个蒙版层。左侧的第一个渐变的 alpha 值为 0.8。右侧的第二个渐变的 alpha 值为 0.5。第一个渐变更不透明，意味着更多的图像显示出来。第二个渐变更透明，意味着更多的背景显示出来。

动画线性渐变

我们想要做的是将动画应用于蒙版的线性渐变alpha值以创建透明动画。稍后，我们会将这些制作成异步动画，以创建碎片效果。

动画渐变是我们在CSS中无法做到的。也就是说，直到我们得到@property的有限支持。同样，您需要在Chrome或其他支持Blink的浏览器中查看此内容：
在这里插入图片描述
CSS代码：

* {
    box-sizing: border-box
}

:root {
    --sand: #b3994d;
    --wave-one: #fff;
    --wave-two: #d9eaf2;
    --wave-three: #69c;
    --wave-four: #0d4073
}

@property --wave {
    inherits:false;
	initial-value:0%;
	syntax:''
}

body {
    background: linear-gradient(transparent 0 calc(35% + (var(--wave) * 0.5)),var(--wave-four) calc(75% + var(--wave)) 100%),linear-gradient(transparent 0 calc(35% + (var(--wave) * 0.5)),var(--wave-three) calc(50% + var(--wave)) calc(75% + var(--wave))),linear-gradient(transparent 0 calc(20% + (var(--wave) * 0.5)),var(--wave-two) calc(35% + var(--wave)) calc(50% + var(--wave))),linear-gradient(transparent 0 calc(15% + (var(--wave) * 0.5)),var(--wave-one) calc(25% + var(--wave)) calc(35% + var(--wave))),var(--sand);
    animation: waves 5s infinite ease-in-out;
    min-height: 100vh
}

@-moz-keyframes waves {
    50% {
        --wave: 25%
    }
}

@-webkit-keyframes waves {
    50% {
        --wave: 25%
    }
}

@-o-keyframes waves {
    50% {
        --wave: 25%
    }
}

@keyframes waves {
    50% {
        --wave: 25%
    }
}

简而言之，@property允许我们创建自定义CSS属性，在这里我们可以通过指定类型来定义语法。让我们创建两个属性–c-0和–c-1，它们接受一个初始值为1的数字。

@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}

这些属性将表示CSS掩码中的alpha值。由于它们都默认为完全不透明（即1），因此整个图像通过遮罩显示。下面是如何使用自定义属性重写掩码：

/* Omitting the @property blocks above for brevity */

img {
  mask:
    linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
  transition: --c-0 0.5s, --c-1 0.3s 0.4s;
}

img:hover {
  --c-0:0;
  --c-1:0;
}

我们在这里所做的就是为每个自定义变量应用不同的转换持续时间和延迟。继续并将图像悬停。遮罩的第一个渐变将淡出到alpha值0，以使图像完全透明，然后是第二个渐变。

HTML代码：

<img src="https://media.mybj123.com/wp-content/uploads/2021/08/1629091395-be1cfd1ea1d697d.jpg">

CSS代码：

@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
img {
  -webkit-mask:
     linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */
     linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
  -webkit-mask-size:50% 100%;
  -webkit-mask-repeat:no-repeat;
  transition:--c-0 0.5s, --c-1 0.3s 0.4s;
}
img:hover {
  --c-0:0;
  --c-1:0;
}
body {
  background:pink;
}

效果如下：
在这里插入图片描述

更多的遮罩！

到目前为止，我们只使用了遮罩上的两个线性渐变和两个自定义属性。要创建平铺或碎片效果，我们需要更多的平铺，这意味着更多的渐变和许多自定义属性！

SCSS使这成为一项相当简单的任务，因此这就是我们从现在开始写作风格的方法。正如我们在第一个例子中看到的，我们有一种瓷砖矩阵。我们可以将它们视为行和列，因此让我们定义两个SCSS变量， x 和 x和 x和y来表示它们。

标题自定义属性

我们需要@property为每一个定义。但是，没有人想手动写出所有这些，所以让 SCSS 通过循环运行我们的属性来为我们完成繁重的工作：

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}

然后我们让它们全部进入0悬停状态：

img:hover {
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      --c-#{$i}-#{$j}: 0;
    }
  }
}

标题渐变

我们将编写一个@mixin为我们生成它们的代码：

@mixin image() {
  $all_t: (); // Transition
  $all_m: (); // Mask
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
      $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
    }
  }
  transition: $all_t;
  mask: $all_m;
}

我们所有的蒙版层大小相同，因此我们只需要一个属性，依赖于 x 和 x和 x和y变量和calc()（更多关于calc()用法）：

mask-size: calc(100%/#{$x}) calc(100%/#{$y})

您可能也注意到了这一行：

$all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);

在相同的混合中，我们还将生成包含所有先前定义的自定义属性的transition属性。

最后，由于SCSS中的random()函数，我们为每个属性生成了不同的持续时间/延迟。

@function transition($i,$j) {
  @return $s*random()+s $s*random()+s;
}

现在我们要做的就是调整 x 和 x和 x和y变量来控制我们碎片的粒度。

实例

公共HTML代码：

<img src="https://media.mybj123.com/wp-content/uploads/2021/08/1629091395-be1cfd1ea1d697d.jpg">

玩动画

我们还可以更改随机配置以考虑不同类型的动画。

SCSS代码：

$x:20;  /*  number of row */
$y:20;  /*  number of columns */
$s:0.8; /* speed factor */

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}
@function transition($i,$j) {
  //@return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  //@return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  //@return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  //@return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  //@return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  @return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  //@return ($s*random())+s ($s*random())+s; /* full random*/
}

@mixin image() {
    $all_t: ();
    $all_m: ();
    @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
         $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
      }
    }
    transition: $all_t;
     -webkit-mask: $all_m;
     mask: $all_m;
}

img {
  @include image();
  -webkit-mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  -webkit-mask-repeat:no-repeat;
  mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  mask-repeat:no-repeat;
}

img:hover {
  @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         --c-#{$i}-#{$j}: 0;
      }
    }
}

body {
  background:pink;
}

效果如下：
在这里插入图片描述
在上面的代码中，我定义了transition()如下函数：

/ Uncomment one to use it
@function transition($i,$j) {
  // @return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  // @return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  // @return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  // @return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  @return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  // @return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  // @return ($s*random())+s ($s*random())+s; /* full random*/
}

通过调整公式，我们可以得到不同种类的动画。只需取消您想要使用的注释。这份清单并非详尽无遗 — 通过考虑更多的forumlas，我们可以有任何组合(我让您想象一下，如果我们添加高级数学函数，比如sin()、sqrt()等，可能会发生什么。）

玩渐变

我们仍然可以通过调整渐变来处理我们的代码，这样我们就可以为颜色停止设置动画而不是 alpha 值的动画。我们的渐变看起来像这样：

linear-gradient(white var(--c-#{$i}-#{$j}),transparent 0)

然后我们将变量从100%到 进行动画处理0%。而且，嘿，我们不必坚持使用线性渐变。为什么不是径向的？

SCSS代码 :

$x:20;  /*  number of row */
$y:20;  /*  number of columns */
$s:0.8; /* speed factor */

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}
@function transition($i,$j) {
  //@return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  //@return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  //@return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  //@return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  //@return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  //@return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  @return ($s*random())+s ($s*random())+s; /* full random*/ 
}
@function gradient($c) {
  //@return linear-gradient(rgba(0,0,0,var($c)) 0 0);
  //@return linear-gradient(0deg,white calc(100%*var(#{$c})),transparent 0);
  @return radial-gradient(white calc(100%*var(#{$c})),transparent 0);
  //@return conic-gradient(white calc(100%*var(#{$c})),transparent 0);
}
@mixin image() {
    $all_t: ();
    $all_m: ();
    @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
         $all_m: append($all_m, gradient(--c-#{$i}-#{$j}) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
      }
    }
    transition: $all_t;
     -webkit-mask: $all_m;
     mask: $all_m;
}

img {
  @include image();
  -webkit-mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  -webkit-mask-repeat:no-repeat;
  mask-size:calc(100%/#{$x}) calc(100%/#{$y});
  mask-repeat:no-repeat;
}

img:hover {
  @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         --c-#{$i}-#{$j}: 0;
      }
    }
}

body {
  background:pink;
}

效果如下：
在这里插入图片描述
就像过渡一样，我们可以定义任何我们想要的渐变——组合是无限的！

玩重叠

让我们引入另一个变量来控制渐变蒙版之间的重叠。此变量将设置mask-size如下：

calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y})

如果等于 ，则没有重叠1。如果它更大，那么我们确实得到了重叠。这使我们可以制作更多种类的动画：

SCSS代码：

$x:20;  /*  number of row */
$y:20;  /*  number of columns */
$s:0.8; /* speed factor */
$o:1.4; /* overlapping factor*/

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}
@function transition($i,$j) {
  //@return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  //@return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  //@return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  //@return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  //@return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  @return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  //@return ($s*random())+s ($s*random())+s; /* full random*/ 
}
@function gradient($c) {
  //@return linear-gradient(rgba(0,0,0,var($c)) 0 0);
  //@return linear-gradient(0deg,white calc(100%*var(#{$c})),transparent 0);
  @return radial-gradient(farthest-side,white calc(100%*var(#{$c})),transparent 0);
  //@return conic-gradient(white calc(100%*var(#{$c})),transparent 0);
}
@mixin image() {
    $all_t: ();
    $all_m: ();
    @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
         $all_m: append($all_m, gradient(--c-#{$i}-#{$j}) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
      }
    }
    transition: $all_t;
     -webkit-mask: $all_m;
     mask: $all_m;
}


img {
  @include image();
  -webkit-mask-size:calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y});
  -webkit-mask-repeat:no-repeat;
  mask-size:calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y});
  mask-repeat:no-repeat;
}
img:hover {
  @for $i from 0 through ($x - 1) {
      @for $j from 0 through ($y - 1) {
         --c-#{$i}-#{$j}: 0;
      }
    }
}

body {
  background:pink;
}

效果如下：
在这里插入图片描述

结语

原理很简单，我们所要做的就是找到变量和公式之间的完美组合，以创造出惊人而疯狂的图像碎片效果。

原文链接：https://www.mybj123.com/12567.html

红薯不甜
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现图片碎片翻页
qq_43217704的博客
05-13 611
思路 在box中生产父元素，父元素中循环生成100个子元素，每个子元素获取同一张图片的不同位置，拼在一起形成一整张图片。 展示结束时，让子元素3d旋转位移，然后透明度设置为0，实现效果 最后添加remove删除父元素释放空间 代码 HTML <!DOCTYPE html> <html lang="ch"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conte
【canvas】图片打碎与重组动画
最新发布
九日的博客
04-29 419
前端实现一个图片打碎重组的动画。
css代码文字破碎js特效
ICode联盟
08-22 500
css代码文字破碎特效，通过伪元素和CSS3帧动画来实现文字震动之后，碎裂开来的效果。
图片碎片html css,canvas和css polygon实现图片碎片化
weixin_36444881的博客
06-04 216
三角剖分三角剖分就是将一些随机的点变成不重叠的小三角形，并且最后形成的三角形有“空圆特性”，就是任一三角形的外界圆内都没有其他的点。这个"空圆特性"也是我们实现代码的主要依据。现在我们就来看看代码是如何去实现三角剖分的：首先我们假设我们已经随机产生了4个点，第一步，我们要这些点的最大，最小边界，然后制作一个很大足以包裹住所有点的一个三角形：很显然，现在所有的点都在三角形里面，那么当然也肯定在三角形...
超厉害的CSS3图片破碎爆炸效果！
weixin_34402408的博客
09-26 2538
Java代码   var fx  = {       buffer : function(obj, cur, target, fnDo, fnEnd, fs){           if(!fs)fs=6;           var now={};           var x=0;           var v=0;                   ...
canvas&css polygon实现图片碎片化
weixin_40863414的博客
01-29 552
图片碎片化切换效果，用canvas和css polygon去实现，核心难点是三角剖分，下面文章讲解了三角剖分的主要思路，有需要的可以看看。 文章地址： canvas&amp;amp;css polygon实现图片碎片化 ...
两行代码实现图片碎片化加载
Yvette Lau的专栏
08-21 600
今天来实现一个图片碎片化加载效果，效果如下：碎片化加载我们分为 3 个步骤来实现：定义 html 结构拆分图片编写动画函数定义 html 结构 这里只需要一个 canvas 元素就可以了...
使用CSS实现中间镂空的图片遮罩效果
09-24
主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下
微信小程序 利用css实现遮罩效果实例详解
08-31
在微信小程序中，实现遮罩效果是常见的交互设计，它通常用于显示半透明的背景层，以便突出显示特定内容或进行操作确认。本实例将详细讲解如何利用CSS来完成这一功能。 首先，我们需要理解遮罩的基本结构。在微信小...
用CSS遮罩实现过渡效果的示例代码
12-12
我们将使用steps()和位于图片之上的PNG实现一个有趣的过渡效果。steps()是一个timing function，允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数，第一个参数是一个...
巧用CSS3 border实现图片遮罩效果代码
09-25
在本文中，我们将深入探讨如何使用CSS3的`border`属性来实现一种创新的图片遮罩效果。这种技术能够为网页设计带来独特的视觉体验，尤其是当你想要在图片上添加一些互动性或者动态效果时，它能起到很好的装饰作用。...
HTML+CSS+JS实现 ❤️Three碎片化图片切换❤️
java李阳勇的博客
09-14 967
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： body { margin: 0; overflow: hidden; } canvas { background-image: radial-g
照片破碎css,【第1845期】给破碎图片添加样式
weixin_39948277的博客
08-03 258
原标题：【第1845期】给破碎图片添加样式前言文章是16年的，对体验倒是挺好的一个方案。今日早读文章由@zhangbao90s翻译授权分享。@zhangbao，有三年前端开发经验，目前在上海工作。当前着重于对前端基础技术的学习，活跃于掘金(@zhangbao90s)。平时会经常翻看和翻译国外的一些技术文章，希望跟大家一起进步。如果 的 src 属性值是一个无效地址，最终的渲染结果就很丑陋： 我们...
CSS3图片破碎爆炸效果
xf326521的专栏
07-11 2314
[code="java"]var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; var v=0; if(!obj.__last_timer)obj.__last_timer=0; var t=new Dat...
图片碎片化mask动画
weixin_34114823的博客
04-14 172
图片碎片化mask动画 效果 源码 https://github.com/YouXianMing/Animations // // TransformFadeViewController.m // Animations // // Created by YouXianMing on 15/11/17. // Copyright ©...
css 实现自定义遮罩层模态框
zcc的博客
07-15 1286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html、css自定义实现模态框遮罩层</title> <style> html,body { width: 100%; height: 100%; margin: 0; .
图片碎片化 可支持操作和定时
小鄧同学的博客
05-07 82
图片碎片化 可支持操作和定时 burst() { var that = this; var ready = true; var img = document.querySelector('#container'); var S = 1; var R = 4; var C = 7; var W = parseInt(window.getComputedStyle(img)['width']); var H = parseInt(window.ge
css设置遮罩层
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-07 1516
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css设置遮罩</title> <style> .box::before { content: ""; position: fixed; top: 0;
HTML图片溶解特效
JackieDYH的博客
10-16 1958
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } bo...
css制作图像遮罩效果
03-31
图像遮罩效果可以用CSS的clip-path属性来实现。clip-path可以通过定义一个图形，将其应用于一个元素的区域，以定义哪些部分应该显示，哪些部分应该隐藏。 以下是一个使用clip-path制作图像遮罩效果的示例： HTML代码： ``` <div class="image"> <img src="https://picsum.photos/400/300" alt="Image"> </div> ``` CSS代码： ``` .image { position: relative; width: 400px; height: 300px; overflow: hidden; } .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); } ``` 在上面的示例中，我们首先将包含图像的容器设置为相对定位，并将其宽度和高度设置为图像的宽度和高度。然后，我们将图像设置为绝对定位，并将其位置设置为容器的左上角。 接下来，我们使用object-fit属性将图像缩放到容器的大小，并使用clip-path属性定义一个多边形，将其应用于图像元素。在这个多边形中，我们定义了四个点来创建一个三角形，它会遮罩图像的下部分。你可以根据自己的需求来调整多边形的形状，以实现不同的遮罩效果。 最后，我们将容器的overflow属性设置为hidden，以确保超出容器边界的部分被裁剪掉。 通过这种方式，我们可以轻松地使用CSS制作各种图像遮罩效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值