一、3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换。和二维变形一样,三维变形可以使用transform属性来设置 1、 3D移动 l 方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length), ...
分类:
Web程序 时间:
2017-05-07 23:22:26
阅读次数:
581
jQuery的优势 write less.do more 1.轻量级。jQuery非常轻巧 2.强大的选择器。jQuery允许开发使用从css1到css3的几乎所有选择器以及jQuery独创的高级而复杂的选择器 3.出色的DOM封装 4.可靠的事件处理机制 5.完善的Ajax 6.不污染顶级变量 7 ...
分类:
Web程序 时间:
2017-05-07 10:06:02
阅读次数:
166
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果。 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名viewport-flip或者直接添加如下CSS: perspective的 ...
分类:
Web程序 时间:
2017-05-06 13:15:18
阅读次数:
491
客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。 下面我们将来一步一步创造一个HTML5和CSS3的表单验证,只使用HTML和CSS。 完成后的如下 ...
分类:
其他好文 时间:
2017-05-05 21:02:39
阅读次数:
653
用css3的border-radius属性右上角的1/4个圆border-top-right-radius:100%;左上角的1/4个圆圈border-top-left-radius:100%右下角的1/4个圆border-bottom-right-radius:100%;左下角的1/4个圆圈bor ...
分类:
Web程序 时间:
2017-05-05 17:09:22
阅读次数:
187
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了。 实现原理 html代码,首先需要写如下html代码以及class类名: css代码 这里用到了currentColor这个关键字,IE9+浏览器支持,其可以让C ...
分类:
Web程序 时间:
2017-05-04 09:49:01
阅读次数:
312
问题 最近在使用background-image属性来实现CSS3的逐帧动画时,碰到了个问题。在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完全看不到任何动画。 原因 通过网上查找,才发现W3C标准中明确background-image ...
分类:
Web程序 时间:
2017-05-02 16:46:41
阅读次数:
208
css3为了区分伪类和伪元素,已经明确规定了伪类用单冒号表示,而伪元素则用双冒号表示。双冒号是一种新语法,所有支持css3的双冒号语法的浏览器都会支持单冒号的语法,但IE8只支持单冒号。 ...
分类:
其他好文 时间:
2017-05-01 14:20:08
阅读次数:
169
css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 注意:transition,也仅仅有这一个事件。 http://www.runoob.com/jsref/event-transitionend.html vuejs代码片段: ...
分类:
Web程序 时间:
2017-05-01 12:55:18
阅读次数:
544
旋转和平移是2个基础的动画效果,也是复杂动画的基础。 如果是普通的页面只要设置transform属性很容易实现平移+旋转的组合效果,达到自旋转下落的效果。因为操作的直接是动作元素本身很容易理解。 但是在canvas中,如果要实现一个旋转,是需要旋转画布来实现。 如下图: 实现代码 这里save() ...
分类:
其他好文 时间:
2017-04-30 21:28:03
阅读次数:
121