原码笔记

原码笔记

css3实现信纸/同学录效果的示例代码

小诸哥 0

本文介绍了css3实现信纸/同学录效果的示例代码,分享给大家,具体如下:

实现思路:

网格背景,由css3的线性渐变来实现。

纸上的打孔,由圆和圆柱组成,多个打孔,可以由box-shadow的平铺来实现。

实际代码:

  1. <div class="bg-grid"></div>
  2. <style>
  3. .bg-grid {
  4.      height: 400px;
  5.      padding: 10px;
  6.      padding-top: 64px;
  7.      background-color: #efefef;
  8.      background-image: linear-gradient(#e7e6e6 1px, transparent 0),
  9.                      linear-gradient(90deg, #e7e6e6 1px, transparent 0);
  10.      background-size: 21px 21px, 21px 21px;
  11.      background-position: center;
  12. }
  13.  
  14. .bg-grid:before,
  15. .bg-grid:after{
  16.      content: '';
  17.      position: absolute;
  18.      z-index: 0;
  19.      left: 50%;
  20.      transform: translateX(-50%);
  21.      display: inline-block;
  22.      background-color: #fff;
  23.      height: 28px;
  24.      box-shadow: 68px 0 0 0 #fff,
  25.                  calc(68px * 2) 0 0 0 #fff,
  26.                  calc(68px * 3) 0 0 0 #fff,
  27.                  calc(68px * 4) 0 0 0 #fff,
  28.                  calc(68px * 5) 0 0 0 #fff,
  29.                  -68px 0 0 0 #fff,
  30.                  calc(68px * -2) 0 0 0 #fff,
  31.                  calc(68px * -3) 0 0 0 #fff,
  32.                  calc(68px * -4) 0 0 0 #fff,
  33.                  calc(68px * -5) 0 0 0 #fff;
  34. }
  35. .bg-grid:before {
  36.      top: 0;
  37.      width: 10px;
  38. }
  39.  
  40. .bg-grid:after {
  41.      top: 26px;
  42.      width: 28px;
  43.      border-radius: 50%;
  44. }
  45. .bg-grid{
  46.  
  47. }
  48. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: 信纸 同学录