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.........完整代码请登录后点击上方下载按钮下载查看