相信不少朋友在写页面的时候都会遇到相似步骤条的效果,当进入到第 x 步的时候,前面是高亮的,后面是灰的,甚至还有多是其余的一些样式,反正基本上就相似这样的一个效果。css
对于这样的效果,通常状况下都会用一个相似 width: 33%;
这样的宽度或者位置控制,写在 style
属性中,而且都是经过 JS 去计算的。其实,在 HTML5 的表单类型属性中,咱们能够结合伪元素快速实现相似步骤条的效果,并且仅仅只是须要修改该标签的 value
属性值便可。html
如今要说的是 progress
标签元素,从代码上来看,十分简单,在标签元素中间存在一个与 value
值相同的内容,主要是考虑若是低端浏览不支持的话,仍是展现一下这个数字结果,而咱们如今则是考虑浏览器兼容的状况下所作的事情。若是比较在乎兼容性的话,能够查看一下 https://caniuse.com/progress。web
<progress value="33" min="1" max="100">33</progress>
从上面这个代码中咱们很容易就能够理解,要展现的进度状况是在 1 到 100 之间的 33 这个位置,或者咱们也能够直接理解为 33% 部分。在 chrome 浏览器中默认的效果就是这样了。chrome
简单的 HTML 标签,直观的效果。那么可能就有人会问了,如今只有这么一个标签元素,而通常进度是有几种颜色搭配的,那么须要怎么处理呢?是的,这的确是一个问题,但也仅仅只是从表面上看到的一个问题,若是咱们把 DevTools 设置中的 Show user agent shadow DOM 打开,而后再选中这个 progress
元素,就会有新世界出现了。浏览器
如今咱们能够看到在 progress
中其实还存在几个元素,那么接下来咱们就能够利用这些伪元素来帮咱们实现更多效果了。app
progress { display: block; width: 300px; height: 35px; margin-bottom: 10px; -webkit-appearance: none; } progress::-webkit-progress-bar { background: url(bg_step.png) no-repeat 0 0; } progress::-webkit-progress-value { background: url(bg_step.png) no-repeat 0 -50px; } progress[value="2"]::-webkit-progress-value { background-position: 0 -100px; } progress[value="3"]::-webkit-progress-value { background-position: 0 -150px; }
很粗暴的用一张雪碧图来处理了一下,图片就是前面的那张步骤条图片,只不过最终的效果就是根据不一样的 value
值,展现高亮部分的步骤。若是要好好完整的搞,那么还须要作细节地处理。动画
在前面那张带有伪元素的图中,咱们能够看到这个 progress
中还包含了如下三个伪元素:url
而后再加上 ::after
和 ::before
这两个,那么一共有 5 个元素可用,固然,这 5 个伪元素是有层级关系的。spa
inner-element > (bar > value) + before + after
value 包含在 bar 中,bar 又在 element 中,最后 element 与 before 和 after 同级。code
说分析,其实也没啥可分析的,知道了这几个伪元素的关系,除了 before
和 after
须要加 content
属性之外,其余三个在具体运用时就跟普通标签元素没任何区别。
知道了这几个伪元素存在后,是否是有种很幸福的感受,一个 progress
竟然包含了这么多伪元素,就跟一个组件似的,哦,对,这原本就是一个“组件”。因此接下来咱们是否是就立刻能够开始吭哧吭哧地写样式,作效果呢?
progress::before { content: 'linxz开始样式处理'; } progress::after { content: '简单粗暴的样式linxz'; } progress::-webkit-progress-inner-element { box-sizing: content-box; border: 3px dashed #333; } progress::-webkit-progress-bar { background: #0f0; } progress::-webkit-progress-value { background: #f00; }
打开页面看一下,是否是发现哪里不对呢?
这确定不对啊,不是设置了绿色的 bar,红的 value 吗?但是为何没效果呢?还有 element 的边框也没出来,这是为何呢?
其实这主要是由于咱们还少写了一个属性,须要在 progress
中加入这个。
progress { -webkit-appearance: none; }
如今咱们再看看会发现,这个世界开始变了。
该属性的主要做用是改变元素的外观,而 progress
内置了一个外观样式,默认值是 auto
,也就表明着这个元素将颇有可能会跟着系统的主题而变化。在 MDN 有这么一句介绍:
The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme.
同时必不可少的会附带上了不少属性值的效果,在这里就再也不一一展开说明了。但须要注意,若是咱们要对一些特殊的组件,尤为是表单类型的,在不在是否有默认的外观属性,就随手加一下。固然啦,最稳妥的方式就是经过 DevTools 看一下 computed 后的样式就知道了。
首先请注意,文中并未相对应的属性进行深刻说明,好比 value
、min
以及 max
,这些也没啥好说明的;其次呢,主要是想跟你们提一下 progress
中咱们能够利用 value
等属性更快捷地获取到一个进度条的值,而后结合 progress
的伪元素作一些页面效果。
是的,主要想说的就是这么一点。
可能有人会以为 demo 的效果很丑,那是必然的。手头上没有最直接的 demo,只是忽然有了这么一个想法,因此才写了这么一篇简单介绍的内容。可是请必定要相信,这里有 1 个 progress
和 5 个伪元素能够用,至关于 6 个标签元素,能够作的事情仍是很多。好比加上渐变、动画什么的,好看的效果就有了。
但必需要注意,不能遗忘 appearance
这个属性!
首发我的公众号: 志语自乐( https://mp.weixin.qq.com/s/jC...