css3
-
利用css3实现圆形进度条
在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序中，canvas的画布具有最高的层级，不易于扩展。 但使用css3和js实现进度条就很容易的避免了这方面的问题。 注：这篇文章里面使用jq…
-
CSS3+Js实现响应式导航条方法
本文介绍css3+js实现响应式导航条方法 今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。 另外需要…
-
图解CSS3制作圆环形进度条的方法
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后css3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解css3制作圆环形进度条的方法 首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了： .circleprogress{…
-
css3多列及瀑布流效果示例代码
这篇文章介绍css3多列及瀑布流效果示例代码 css3内容分块，多列效果(类似报纸版块排版): .p02{ /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/ column-count:4; column-gap:30px; column-rule:5px outse…
-
使用CSS3中calc()属性来以算式表达尺寸数值的说明
本篇文章讲述使用css3中calc()属性来以算式表达尺寸数值的说明 calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表达尺寸数值 我们想要实现页面自适应布局时，通常因为m…
-
详解css3中matrix函数的使用方法
下面小编就为大家带来一篇详解css3中matrix函数的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 scale(sx,sy)对应matrix(sx,0,0,sy,0,0) 拉伸 rotate(θ)对应matrix(cosθ,sinθ,-sinθ,cosθ…
-
移动端Web页面的CSS3 flex布局学习指南
flexbox通常能让我们更好的操作他的子元素布局,这里稍微来提炼一下移动端web页面的css3 flex布局学习指南,需要的朋友可以参考下 1、开始使用flexbox布局的方法，代码如下： footer{ display:flex; } 立即学习“前端免费学习笔记（深入）”； 2、接下来为foot…
-
CSS3中的box-flex弹性盒属性布局的示例介绍
flex布局毫无疑问是当今web页面的最强大布局方式,box-flex弹性盒模型是其中的一个代表,这里我们就来以实例讲解css3中的box-flex弹性盒模型布局 box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的…
-
使用CSS3的图层阴影和文字阴影效果的详细介绍
box-shadow图层阴影 box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值阴影类型可以省略，默认为外投影，当它的值为inset时，为内阴影效果。X水平偏移和Y垂直偏移可取正负值，当X为负值是投影在左边，为正时投影在右边。当Y为负值…
-
使用CSS3的ruby-position固定注音位置的用法示例介绍
ruby-position能在样式上定制文字周围的注音位置,页面编码设置好以后可以用来制作各种语言之间的加注翻译效果,下面我们来看一下使用css3的ruby-position固定注音位置的用法示例: ruby-position 指定注意的位置时使用。 属性值1.before 注音文本会在基础文字上面…
