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 相关文章推荐
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
用户的详细注册和判断
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
不安全的常用的js写法
2009/09/15 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Python中super的用法实例
2015/05/28 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
python中列表的含义及用法
2020/05/26 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
行政专员工作职责
2013/12/22 职场文书
语文教学感言
2014/02/06 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL