HTML 印章效果 - Githubissues

<!DOCTYPE html>
<html>
<head>
  <title>印章效果</title>
  <style type="text/css">
  body, html{
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/mf.jpeg') scroll no-repeat center/cover;
  }

  .stamp {
    transform: rotate(12deg);
    color: #555;
    font-size: 3rem;
    font-weight: 700;
    border: 0.25rem solid #555;
    display: inline-block;
    padding: 0.25rem 1rem;
    text-transform: uppercase;
    border-radius: 1rem;
    font-family: 'Courier';
    -webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
    -webkit-mask-size: 944px 604px;
    mix-blend-mode: multiply;
  }

  .is-nope {
    color: #D23;
    border: 0.5rem double #D23;
    transform: rotate(3deg);
    -webkit-mask-position: 2rem 3rem;
    font-size: 2rem;
  }

  .is-approved {
    color: #0A9928;
    border: 0.5rem solid #0A9928;
    -webkit-mask-position: 13rem 6rem;
    transform: rotate(40deg);
    border-radius: 0;
  }

  .is-draft {
    color: #C4C4C4;
    border: 1rem double #C4C4C4;
    transform: rotate(-5deg);
    font-size: 6rem;
    font-family: "Open sans", Helvetica, Arial, sans-serif;
    border-radius: 0;
    padding: 0.5rem;
  }
  </style>
</head>
<body>
<span class="stamp">proposal</span>
<span class="stamp is-nope">未收到</span>
<span class="stamp is-approved">已收到</span>
<span class="stamp is-draft">Draft</span>
</body>
</html>
效果：
Thanks ❤️ https://codepen.io/zhulinpinyu/pen/gJBXrR
zhulinpinyu / zhulinpinyu.github.io

HTML 印章效果 #14
