html5借用repeating-linear-gradient实现一把刻度尺(ruler)


Posted in HTML / CSS onSeptember 09, 2019

像刻度这种东西都是重复性的,说到重复我就想到了repeating-linear-gradient,看名字就能知道是重复线性渐变,它能更方便的实现隔行变色的功能,如果你想画一个背景,它是重复、隔行的,那么用它就没错了;

效果图

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

原理

尺子刻度分成三种厘米刻度半厘米刻度毫米刻度,那么在一个元素上画三个重复线性渐变就行啦?

基础用法

background-image: repeating-linear-gradient(90deg, red 0, red 50px, blue 0, blue 200px);

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

简单理解:

red 0, red 100px表示0100px的位置渲染绿色,blue 0, blue 200px表示0200px的位置渲染红色,然后重复,所以红色实际看到的是150px

拆分步骤

1. 刻度尺盒子

首先得画一个盒子,宽度为16cm,目的是15cm的尺子,左右内边距各为.5cm

.ruler {
  width: 16cm;
  height: 3cm;
  border: 1px solid $color-border;
}

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

2. 厘米刻度

一刻度的宽度为5px,然后每隔1cm画一个刻度(用透明色隔开):

background-image: repeating-linear-gradient(90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm);

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

设置尺子两边边距为.5cm,调整背景的位置即可:

background-position: .5cm 0;
background-repeat: no-repeat;

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

发现最右边的没有对齐,原因是最后一个刻度的宽度也为5px,所以我们得给尺子增加5px宽度:

width: calc(16cm + 5px);

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

接下来给设置一下刻度的高度为30px

background-size: 100% 30px;

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

把位置改成到底部,因为之前的位置只设置了x轴,那么y轴设置到100%即可:

background-position: .5cm 100%;

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

3. 半厘米刻度

步骤跟厘米刻度一致,做一些小调节即可,设置多背景用逗号分开,其他属性也是:

background-image: "厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm);
background-size: "厘米刻度大小", 100% 20px; // 高度为20px

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

右边多出来一个刻度,所以背景的宽度不能为100%,得把它减掉(根据实际情况):

background-size: "厘米刻度大小", calc(100% - 1cm) 20px;

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

发现半刻度不在刻度的中间,还是有一点偏差,得改一下半刻度的背景位置:

background-position: "厘米刻度位置", (.5cm + 1.5px) 100%;

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

4. 毫米刻度

步骤也跟上面一致:

background-image: "厘米刻度背景", "半厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm);
background-size: "厘米刻度大小", "半厘米刻度大小", calc(100% - 1.2cm) 10px; // 高度为10px
background-position: "厘米刻度位置", "半厘米刻度位置", calc(.5cm + 2px) 100%; // 裁剪背景

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

5. 数字

在盒子里面放0-15数字:

<div class="ruler">
  <span>0-15</span>
</div>

样式增加如下即可:

.ruler {
  display: flex;
  justify-content: space-between;
  
  span {
    flex: 1;
    margin-top: 55px;
    text-align: center;  
  }
}

效果如下:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

codepen地址:css刻度尺

洗剪吹

相似的案例还有螺纹进度条,由于是一样的,所以只放一个啦,托尼老师洗剪吹店门前那个彩带也还行哈哈:

html5借用repeating-linear-gradient实现一把刻度尺(ruler)

codepen地址:css洗剪吹

最后

哈哈哈,不知道说啥,刻度尺没啥用,但是很有趣,不是吗 ❗

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

HTML / CSS 相关文章推荐
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 #HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 #HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 #HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 #HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 #HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 #HTML / CSS
You might like
PHP的FTP学习(三)
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php里array_work用法实例分析
2015/07/13 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Django的Modelforms用法简介
2019/07/27 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
中学生教师节演讲稿
2014/09/03 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
音乐剧猫观后感
2015/06/04 职场文书
大学军训口号大全
2015/12/24 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
使用feign服务调用添加Header参数
2021/06/23 Java/Android