HTML做成信纸格式,css3实现信纸/同学录效果的示例代码

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

实现思路：

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

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

实际代码：

.bg-grid {

height: 400px;

padding: 10px;

padding-top: 64px;

background-color: #efefef;

background-image: linear-gradient(#e7e6e6 1px, transparent 0),

linear-gradient(90deg, #e7e6e6 1px, transparent 0);

background-size: 21px 21px, 21px 21px;

background-position: center;

}

.bg-grid:before,

.bg-grid:after{

content: '';

position: absolute;

z-index: 0;

left: 50%;

transform: translateX(-50%);

display: inline-block;

background-color: #fff;

height: 28px;

box-shadow: 68px 0 0 0 #fff,

calc(68px * 2) 0 0 0 #fff,

calc(68px * 3) 0 0 0 #fff,

calc(68px * 4) 0 0 0 #fff,

calc(68px * 5) 0 0 0 #fff,

-68px 0 0 0 #fff,

calc(68px * -2) 0 0 0 #fff,

calc(68px * -3) 0 0 0 #fff,

calc(68px * -4) 0 0 0 #fff,

calc(68px * -5) 0 0 0 #fff;

}

.bg-grid:before {

top: 0;

width: 10px;

}

.bg-grid:after {

top: 26px;

width: 28px;

border-radius: 50%;

}

.bg-grid{

}

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

HTML做成信纸格式,css3实现信纸/同学录效果的示例代码相关推荐

css3半圆弧线,css3实现画半圆弧线的示例代码
本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码 .circle1 { width: 100px; height: 200px; border: 1px solid bl ...
页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码展开收起唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻通:唯)问女何所思,问女何 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
html5 div 拱桥形状制作,纯CSS3+DIV实现小三角形边框效果的示例代码
具体代码如下所示: html代码是这样的下面用CSS3分别实现向上.下.左.右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30p ...
html table的边框线怎么变圆角_实现CSS3中的border-radius(边框圆角)示例代码
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(bor ...
html switch开关实现隐藏,css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
CSS3实现对话气泡效果
CSS3实现对话气泡效果以前我们要实现对话气泡效果很麻烦,从有了CSS3以后就变得简单多了,我们就来看下CSS3如何实现对话气泡效果.CSS3开始改变我们的生活了.现在要创建一个在个浏览器下面都看 ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...

HTML做成信纸格式,css3实现信纸/同学录效果的示例代码

HTML做成信纸格式,css3实现信纸/同学录效果的示例代码相关推荐

最新文章

热门文章