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 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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
fgetcvs在linux的问题
2012/01/15 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python字符串替换示例
2014/04/24 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python 多线程实例详解
2017/03/25 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python安装scipy的方法步骤
2019/06/26 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
C++程序员求职信
2014/05/07 职场文书
与死神共舞观后感
2015/06/15 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js