最近看到一个自定义制作进度条的效果,觉得里面有些知识点比较不错,今天就来看一下,先来看看效果:

css制作自定义进度条 gif css制作自定义进度条

难点分析

我们先来看看实现效果的核心代码:

上面的--color和--position属于css的var用法,具体可看 css中的var属性

在background-image上有一个圆形渐变(radial-gradient),其中有一个closest-side,这个是干嘛的呢?类似的关键字还有farthest-side,closest-corner,farthest-corner,它们表示的是在圆形渐变中,最终绘制到什么位置。具体可看下图:

closest-side和farthest-side看的是圆心和四条边的距离,closest-side最终绘制到距离四条边最近的那里,farthest-side最终会知道距离四条边最远的那里。

closest-corner和farthest-corner看的是圆心和四个角的距离,closest-corner最终绘制到距离四个角最近的那里,farthest-corner最终绘制到距离四个角最远的那里。

还需要注意的是radial-gradient和-webkit-radial-gradient两个方法的一些center,size,shape相关参数的设置是不太一样的:

最明显的区别就是标准版的写法中位置是在at后面,而-webkit-版本中没有at关键字。其中的shape包含circle和ellipse,默认是ellipse;position就是圆心的位置;size就是上面的四个数值,默认是farthest-side。

最后需要注意就是background-image可以多个放置多个渐变图形,上面的叠加渐变实际上组成如下:

background Layer 1 linear-gradient radial-gradient

safaric上的处理

在safaric上看有些不兼容,有些地方需要做一些特殊处理:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字