全国服务热线:4008-888-888

技术知识

html5借用repeating

像刻度这类物品全是反复性的,说到反复我就想起了repeating-linear-gradient,看姓名就可以了解是反复线形渐变色,它能更便捷的完成隔行变色的作用,假如你想画1个情况,它是反复、隔行的,那末用它就没错了;

实际效果图

基本原理

尺子刻度分为3种厘米刻度半厘米刻度毫米刻度,那末在1个元素上画3个反复线形渐变色就行啦👌

基本用法

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

实际效果以下:

简易了解:

red 0, red 100px表明0100px的部位3D渲染翠绿色,blue 0, blue 200px表明0200px的部位3D渲染鲜红色,随后反复,因此鲜红色具体看到的是150px

拆分流程

1. 刻度尺盒子

最先得画1个盒子,宽度为16cm,目地是15cm的尺子,上下内边距各为.5cm

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

实际效果以下:

2. 厘米刻度

1刻度的宽度为5px,随后每隔1cm画1个刻度(用全透明色分隔):

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

实际效果以下:

设定尺子两侧边距为.5cm,调剂情况的部位便可:

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

实际效果以下:

发现最右侧的沒有对齐,缘故是最终1个刻度的宽度也为5px,因此大家得给尺子提升5px宽度:

width: calc(16cm + 5px);

实际效果以下:

接下来给设定1下刻度的高宽比为30px

background-size: 100% 30px;

实际效果以下:

把部位改为究竟部,由于以前的部位只设定了x轴,那末y轴设定到100%便可:

background-position: .5cm 100%;

3. 半厘米刻度

流程跟厘米刻度1致,做1些小调整便可,设定多情况用逗号分开,别的特性也是:

background-image: "厘米刻度情况", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm);
background-size: "厘米刻度尺寸", 100% 20px; // 高宽比为20px

实际效果以下:

右侧多出来1个刻度,因此情况的宽度不可以为100%,得把它减掉(依据具体状况):

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

实际效果以下:

发现半刻度不在刻度的正中间,還是有1点误差,得改1下半刻度的情况部位:

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

实际效果以下:

4. 毫米刻度

流程也跟上面1致:

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%; // 剪裁情况

实际效果以下:

5. 数据

在盒子里边放0⑴5数据:

<div class="ruler">
  <span>0⑴5</span>
</div>

款式提升以下便可:

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

实际效果以下:

codepen详细地址:css刻度尺

洗剪吹

类似的实例也有罗纹进度条,因为是1样的,因此只放1个啦,托尼老师洗剪吹店门前那个彩带也还行哈哈:

codepen详细地址:css洗剪吹

最终

哈哈哈,不知道道说啥,刻度尺没啥用,可是很趣味,并不是吗 ❗

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服