云南中建西部建设有限公司网站,中国建设银行积分商城网站,广西住建局和城乡建设局网站,wordpress加友情链接一、前言
记录一些有趣的CSS实现方式#xff0c;总所周知#xff0c;当一段效果可以通过CSS实现的时候#xff0c;绝不使用Javascript来实现#xff0c;因此记录一些有意思的CSS效果#xff0c;一来是方便自己学习#xff0c;另一来是方便以后在需要使用到的时候能快速找…一、前言
记录一些有趣的CSS实现方式总所周知当一段效果可以通过CSS实现的时候绝不使用Javascript来实现因此记录一些有意思的CSS效果一来是方便自己学习另一来是方便以后在需要使用到的时候能快速找到并使用上~
耐心看完你也许有所收获
二、实现效果
大致效果如下文章结尾有代码想要的自取如果想要看demo的可以看这个地址gitee项目demo地址https://gitee.com/yin_zhuqun/css-demo 三、CSS要点
这个效果其实没有什么复杂的CSS写法核心的要点就是对 background属性 的利用MDN关于background属性的说明https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
思路大致有两点
实线和虚线分开根据不同的尺寸画格子然后利用background-repeat的铺满效果将整个页面平铺完整实线就是单独的线虚线的实现则利用transparent这个透明属性进行隔断
别的好像也没什么特别的点了剩下的无非就是根据实际场景凑样式换颜色了
四、实现代码
!DOCTYPE html
html langcnheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleCSS网格线,田字格/titlestylebody,html {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.text-style {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 12px 20px;background-color: #ffffff;font-size: 22px;font-weight: bold;letter-spacing: 2px;}/* 具体CSS样式部分 */:root {--gridColor: #888888;/* --gridColor: #000000; */--gridDottedLine: 20px;--gridSolidLine: 60px;}.dotted-line {position: fixed;width: 100%;height: 100%;transform: scale(1.1);overflow: hidden;z-index: -4;}.dotted-line::before,.dotted-line::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.8;content: ;}.dotted-line::before {background: linear-gradient(to right,white 1px,transparent 1px),linear-gradient(to bottom,var(--gridColor) 0.5px,transparent 0.5px);background-size: 4px var(--gridDottedLine);}.dotted-line::after {background: linear-gradient(to bottom,white 1px,transparent 1px),linear-gradient(to right,var(--gridColor) 0.5px,transparent 0.5px);background-size: var(--gridDottedLine) 4px;}.solid-line {position: fixed;width: 100%;height: 100%;transform: scale(1.1);overflow: hidden;z-index: -2;background: linear-gradient(to right,var(--gridColor) 0.5px,transparent 0.5px),linear-gradient(to bottom,var(--gridColor) 0.5px,transparent 0.5px);background-size: var(--gridSolidLine) var(--gridSolidLine);}/style/headbodydiv classdotted-line/divdiv classsolid-line/divdiv classtext-style田字网格线外实内虚/div/body
/html
