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

来源:脚本之家  责任编辑:小易  

杨振宁是中国人中的天才物理学家,目前在世的物理学家中成就最高的一位(成就超过霍金),他一直被人喷,不过就因为两点,第一,钱学森等回国他没有回国,第二,他娶了比自己小那么多的翁帆。但我真搞不懂,这两点有什么好被拿来喷的。爱因斯坦是德国人,二战以后也没有回德国(有人说那是因为德国要杀他,注意,我说了“二战以后”)。同时他也是犹太人,以色列请他当总统他也没去。看看德国人和以色列人也是那样骂他吗?作为科学家,他所作的贡献是全人类共同分享的,与他在哪里做出的有什么关系?还有人说他年轻时不回国效力,年老时回来享受。说实话,他更受得起。无论他多大年纪回来,都是国家需要他。他不比那些体育明星受得起?他不比那些

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

金鱼可以几天不喂食?怎么养才长大?说实话,我只喜欢钓鱼,对于怎么养金鱼没什么经验,我家小金鱼都是老婆照顾的,不出去钓鱼的时间也帮忙喂喂鱼食。喂的鱼食,有时我看是煮熟的鸡蛋黄弄碎了放进鱼缸,要少放,不然放的太多鱼吃不完,时间长了会把鱼缸里的水弄坏掉,金鱼会死的,对于喂食的时间,三天一次为好,大点的金鱼,二天一次也可以了,换水时间,小金鱼一星期换一次水为好,大金鱼也就十天一次吧,反正看到水不好就换对于金鱼多长时大,这个耍看是哪种金鱼了,有的长的很快的,有的本来就是小金鱼品种时间再长也不会长大的,家庭养的是为了观赏,又不是为吃,长的太快太大也不好,有一种观赏鱼长的很快,金鲤,那鱼大,长得也快,谢谢你

效果图

原理

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

组织方面,首发欧文,替补斯玛特,海沃德和霍福德作为辅助的角色存在。北京时间8月31日,据著名记者AdrianWojnarowski报道,骑士和凯尔特人关于欧文的交易已经正式达成,凯尔特人在原交易的基础之上增加了一个2020年的次轮签,作为对小托马斯臀部伤势的补偿,完成了这笔交易。这笔交易的具体内容更新为骑士送出欧文,得到小托马斯、克劳德、2018年篮网首轮选秀权和2020年热火次轮选秀权。这笔交易达成之后,凯尔特人拥有了欧文+海沃德+霍福德的三巨头组合,这是一个的控球后卫+小前锋+内线的配置,非常合理,看起来也能完美契合。霍福德和海沃德都拥有着相当出色的传球能力和稳定的投射能力,这能帮助凯尔特

基础用法

地球人都知道,从字面意思上看,汽车D挡是前进挡,而S挡是运动挡。而实际上,汽车在D挡的时候等于班纳教授,在S挡的时候等于绿巨人,这两个挡位带给司机的感受是大相径庭的,特别是在30万以上的车型,S挡和D挡基本是两辆车。就算是几万大洋的车子,只要挂上S挡,就有能力和跑车一比高低。汽车挂D挡的时候,汽车受ECU控制,在前进的过程中随着发动机转速上升而逐渐升挡,让发动机转速保持在低转速区间,这样发动机的噪音,震动和油耗都会比较小。但汽车需要急加速的时候,车子需要一个降挡的时间把发动机转速拉高,才开始加速。所以,不管车子变速箱调校得多么聪明,总会有一定的延迟。汽车挂S挡的时候,汽车受ECU控制,变速箱一

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

效果如下:

简单理解:

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; }

效果如下:

2. 厘米刻度

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

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;

效果如下:

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

width: calc(16cm + 5px);

效果如下:

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

background-size: 100% 30px;

效果如下:

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

background-position: .5cm 100%;

3. 半厘米刻度

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

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

效果如下:

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

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

效果如下:

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

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

效果如下:

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%; // 裁剪背景

效果如下:

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; } }

效果如下:

codepen地址:css刻度尺

洗剪吹

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

codepen地址:css洗剪吹

最后

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

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

求DOTA贴吧三大神级rep 光法骂退9人 MED1700正补 狗头1控8的 还有5点血翻盘 ...

http://v.youku.com/v_show/id_XMzEzMDgxMTA4.html 1700正补

http://v.youku.com/v_show/id_XMjgwNjAyMjUy.html 狗头1控8

其他真心找不到。

  • 本文相关:
  • js实现移动端h5页面手指滑动刻度尺功能
  • 求DOTA贴吧三大神级rep 光法骂退9人 MED1700正补 ...
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved