CSS3 创建圆形进度条

前言 对于现如今越来越讲效率的互联网时代来说进度至关重要,而反应进度的进度条也就理所当然的成了主角,那么现在问题来了,这个进度条在前端中我们要怎么用代码画出来呢?不过在本文中我们只对圆进度条进行分析,因为直线式进度条比较简单。 SVG 实现 基本实现 基本 CSS 样式 *{ padding: 0; margin: 0; } .container{ width:130px; height:130px; margin:0 auto; } H...

2017
06-07

CSS3 transform 你知多少?

transform 属于CSS3 的新属性。这个属性可以让我们实现很多以前只能通过 JavaScript 来实现的效果。比如元素的运动(缩放、旋转……)。所以这个新属性还是有必要用专门一篇文章来介绍它。毕竟它让我们通过了另一种方式让网页走向多姿多彩的世界。如果你觉得 transform 只能给你带来一点点便利,那么你就大错特错了,因为 transform 除了可以实现 2D 效果外,它还可以实现 3D 效果。现在让我们开...

2017
05-08

CSS3 clip-path 用法详解

前言 css3 的出现无疑是我们这些作为前端人的福音。因为它的出现让我们的在前端的世界变得更炫,多美,更多姿!接下来要给大家介绍的这个属性clip-path 就是一个可以让我们的页面更多姿多彩的 css3 属性。 clip-path 作用 正如前言中所说到的,可以让我们的页面变得多姿多彩,何为多姿,何为多彩呢? 多姿:可以让一个元素显示出不同的形式(如:正方形,圆形,长方形,椭员形,多边形……)...

2016
06-09

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。 说明: 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。 3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Fle...

2015
11-26