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特性绘制简易版围棋效果
Sep 28 HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 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
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
Linux中为php配置伪静态
2014/12/17 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python pickle模块用法实例
2015/04/14 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
大学毕业感言50字
2014/02/07 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
店长岗位职责
2015/02/11 职场文书
升职自荐信怎么写
2015/03/05 职场文书
学籍证明模板
2015/06/18 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android