css实现图片折叠痕迹效果代码-html代码-BFW代码库

css实现图片折叠痕迹效果代码

代码语言：html

代码描述：css实现图片折叠痕迹效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  padding:2em;
  background-color:#778;
  font-family:sans-serif;
}

figure.folded {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0.2em 0.2em 0.8em 0.2em
    rgba(76, 53, 73, 0.4);
}

img.fold-me-please {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:
    hue-rotate(0deg)
    saturate(1)
    brightness(1)
    contrast(1)
    opacity(1);
  mix-blend-mode:normal;
  image-rendering:high-quality;
  transform:scale(1);
  visibility:visible;
}

/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */
/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- */

span.folds {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  grid-template-columns:auto auto auto auto auto;
}

span.cell {
  border:0px solid rgba(30, 10, 60, 0.4);
  font-size:1em;
.........完整代码请登录后点击上方下载按钮下载查看