css+div实现邮票盖章效果代码

代码语言:html

所属分类:布局界面

代码描述:css+div实现邮票盖章效果代码

代码标签: css div 邮票 盖章

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


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

<head>

  <meta charset="UTF-8">
  

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
  background:
    repeating-linear-gradient(-55deg, #0000 0 4%, #c43 0 8%, #0000 0 12%, #369 0 16%) 0 0 / 100% 6vmin repeat-x,
    #d0e0e0
}

.stamp {
  width: 36vmin;
  height: 45vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: pre;
  box-sizing: border-box;
  padding: 1.5vmin 2vmin;
  display: flex;
  align-items: flex-end;
  color: #fffff8dd;
  font-size: 7vmin;
  background: 
    radial-gradient(80% 70% at 60% 40%, #796 30%, #0000 0),
    radial-gradient(50% 60% at 50% 60%, #796 90%, #0000 0) 38% 25% / 23% 20%,
    radial-gradient(50% 50% at 50% 50%, #796 90%, #0000 0) 43% 65% / 23% 15%,
    radial-gradient(50% 50% at 50% 50%, #796 90%, #0000 0) 43% 60% / 23% 5%,
    radial-gradient(50% 50% at 50% 50%, #796 90%, #0000 0) 42% 57% / 23% 7%,
    conic-gradient(at 0 100%, #0000 20deg, #796 0) 29% 45% / 10% 15%,
    conic-gradient(at 0 0, #0000 130deg, #796 0 170deg, #0000 0) 45% 10% / 15% 15%,
    conic-gradient(at 100% 0, #0000 190deg, #796 0 230deg, #0000 0) 76% 11% / 15% 15%,
    conic-gradient(at 50% 0, #0000 155deg, #796 0 210deg, #0000 0) 60% 8% / 15% 15%,
    radial-gradient(210% 220% at 0 0, #0000 50%, #796 0) 24% 85% / 45% 50%,
    radial-gradient(120% 120% at 100% 0, #0000 80%, #796 0) 82% 80% / 15% 35%,
    radial-gradient(35% 100%, #796 50%, #0000 0) 70% 80% / 30% 40%,
    #9b8;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica, sans-serif;
}

.stamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transfor.........完整代码请登录后点击上方下载按钮下载查看

网友评论0