css实现海报纸张折叠褶皱效果代码-html代码-BFW代码库

css实现海报纸张折叠褶皱效果代码

代码语言：html

代码描述：css实现海报纸张折叠褶皱效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        .poster {
          width: 300px;
          padding: 7%;
          position: relative;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0 3px 12px rgba(0,0,0,0.2);
          filter: saturate(70%) contrast(85%);
        }
        .poster img {
          width: 100%;
          display: block;
          z-index: 1;
        }
        .poster:before,
        .poster:after {
          content: '';
          width: 100%;
          left: 0;
          position: absolute;
        }
        .poster:before {
          height: 4%;
          bottom: -4%;
          background-repeat: no-repeat;
          background-image: linear-gradient(177deg, rgba(0,0,0,0.22) 10%, transparent 50%), linear-gradient(-177deg, rgba(0,0,0,0.22) 10%, transparent 50%);
          background-size: 49% 100%;
          background-position: 2% 0, 98% 0;
        }
        .poster:after {
          height: 100%;
          top: 0;
          z-index: 2;
          background-repeat: no-repeat;
          background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), line.........完整代码请登录后点击上方下载按钮下载查看