CSS
王乐平
这个作者很懒,什么都没留下…
展开
-
Canvas三种动态画圆实现方法说明
前言canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 这里我个人总结了3种实现方法,大家可以参考一下。方法一:arc()实现画圆效果:代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style typ原创 2016-12-04 15:18:44 · 27319 阅读 · 0 评论 -
CSS3 FlexBox布局入门简析
前言你们还在仅仅使用块、行内、表格、定位等传统布局方式进行网页的布局吗? 告诉你们一个新的布局模式,CSS3中新引入的FlexBox布局,布局方式十分灵活,含有优秀和惊奇的新特性,而且在主流浏览器上的兼容也不错,是新布局方式的首选。 下面说一下。FlexBox简介FlexBox布局,全称“CSS Flexible Box Layout Module”,即伸缩布局盒,目的在于提供一个更好更有效的原创 2016-12-07 21:59:00 · 1619 阅读 · 0 评论 -
深入了解CSS字体度量,行高和vertical-align
本文英文出处:http: //iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align著作权归作者所有。转载自https: //www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.htmlline-height和vertical-align在转载 2017-03-04 22:01:21 · 2585 阅读 · 0 评论 -
理解 CSS 属性值语法
本文转载自:众成翻译 链接:http: //www.zcfy.cc/article/390万维网联盟(W3C) 使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用。如果你曾看过 CSS 规范,你可能已经见过这套语法了。就像 border-image-slice 的语法 ,让我们看看:<'border-image-slice'> = [<number> | <percenta转载 2017-01-18 17:12:37 · 1108 阅读 · 0 评论 -
CSS3视窗单位vw、vh、vmin、vmax说明
vw、vh做为CSS3中的新单位,已经出来挺久的了,这里也我个人也做一下详细的总结。说明vw、vh、vmin和vmax是CSS3中的新单位,是一种视窗单位,也是相对单位。它们的大小都是由视窗大小来决定的,单位1,代表类似于1%。具体描述如下:vw:视窗宽度的百分比 vh:视窗高度的百分比 vmin:当前较小的vw和vh vmax:当前较大的vw和vh视窗,指的是浏览器可视区域的宽高,也就是wi原创 2017-01-07 21:32:44 · 13655 阅读 · 0 评论 -
Canvas制作动态进度加载水球
前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下。样式预览实现思路关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果。然后,通过绘制圆形路径,进行clip(),实现球型效果。sin()函数相关这里说一下sin()函数的相关基础,对于绘制水波的影响。看一下图,回顾一下中学sin()函数的基础。从原创 2016-12-09 13:35:15 · 12172 阅读 · 12 评论 -
CSS使用网络字体(@font-face)详析
前言以前在给网页文字设置一些好看的字体时,限于用户系统是否安装此字体,而只能使用三种方法解决,要么用通用字体,要么用图片替换文本,要么用Flash。而这几种方法却存在严重的缺陷。 现在好了,@font-face终于解决了这种使用网络字体的问题。浏览器兼容性问题其实,@font-face并不是CSS3才出来的属性,早在1998年它就在CSS2中使用了,但是在CSS2.1中又被除去了,CSS3又把它加原创 2016-11-23 18:47:24 · 7259 阅读 · 1 评论 -
CSS3媒体查询(@media)详细总结和Responsive浅谈
引言一直想对CSS3的媒体查询和Responsive进行一下记录和总结,今天拿出点时间来做一下。媒体查询的历史随着浏览器终端的多样化,无法保证一个网页在不同的设备上呈现出想同的结果,所以Media Query诞生了,让一个页面适用不同的终端。 Media Query早在CSS2的时候就出现,CSS2用<link />标签,而CSS3用@media定义的CSS里面。两者用法类似,但是CSS3与CSS原创 2016-11-22 21:04:56 · 10449 阅读 · 1 评论 -
CSS动画实战:创建一个太极Loading图
这里主要是使用CSS的animation和伪类来构建,分析设定关键帧的执行顺序和时间断。效果动画分析首先通过效果对动画执行进行一下分析:边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执行。针对上面的1效果是需要思考一下的,其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可,整体动原创 2017-08-01 14:50:09 · 4861 阅读 · 2 评论