css实现图片报纸撕裂效果-html代码-BFW代码库

css实现图片报纸撕裂效果

代码语言：html

代码描述：css实现图片报纸撕裂效果

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


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

<style>
/**
 * Magazine Cutout
 * Inspired upon https://tympanus.net/codrops/2020/02/05/crafting-a-cutout-collage-layout-with-css-grid-and-clip-path/
 * but without the need to manually cut up the image in Photoshop (or the like) first.
*/

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cutout {
  position: relative;
  width: 460px;
  height: 702px;
}

.cutout > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.cutout > img:nth-of-type(1) {
  opacity: 1;
  clip-path: polygon(27.68% 39.7%, 27.26% 55.5%, 4.98% 56.24%, 4% 34%);
  transform: translateY(-28%) translateX(-7%);
  z-index: 10;
}

.cutout > img:nth-of-type(2) {
  opacity: 1;
  clip-path: polygon(39.74% 26.34%, 38.44% 32.64%, 23.59% 32.93%, 23.88% 23.08%, 39.76% 23.31%);
  transform: translateX(1.5%);
  z-index: 9;
}

.cutout > img:nth-of-type(3) {
  opacity: 1;
  clip-path: polygon(35.25% 9.90%, 57.56% -0.7%, 99.8% 17.91%, 99.99% 98.21%, 44.86% 97.9%, 45.69% 56.45%, 34.56% 21.78%);
transform: translateX(8%);
  z-index: 8;
}

.cutout > img:nth-of-type(4) {
  opacity: 1;
  clip-path: polygon(59.86% 43.28%, 74.72% 43.59%, 77.62% 76.23%, 43.50% 74.22%, 42.87% 4.........完整代码请登录后点击上方下载按钮下载查看