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


Posted in HTML / CSS onDecember 11, 2018

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

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

实现思路:

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

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

实际代码:

<div class="bg-grid"></div>
<style>
.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{

}
</style>

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

HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 #HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 #HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 #HTML / CSS
使用CSS实现阅读进度条
Feb 27 #HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 #HTML / CSS
纯CSS3实现Material Design效果
Mar 09 #HTML / CSS
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
微信公众号H5支付接口调用方法
2019/01/10 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
python解析文件示例
2014/01/23 Python
python映射列表实例分析
2015/01/26 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
护理专业毕业生自荐信范文
2014/01/05 职场文书
出国英文推荐信
2014/05/10 职场文书
供电工程专业求职信
2014/08/09 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
永远是春天观后感
2015/06/12 职场文书