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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP开发框架总结收藏
2008/04/24 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php字符集转换
2017/01/23 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Python多线程学习资料
2012/12/19 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python 写的一个爬虫程序源码
2016/02/28 Python
python框架django基础指南
2016/09/08 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python实现Dijkstra算法
2018/10/17 Python
Python调用Windows命令打印文件
2020/02/07 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python3获取cookie常用三种方案
2020/10/05 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
pandas针对excel处理的实现
2021/01/15 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
公司市场部岗位职责
2013/12/02 职场文书
银行演讲稿范文
2014/01/03 职场文书
厨房管理计划书
2014/04/27 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
把77A收信机改造成收音机
2022/04/05 无线电