近期工作时研究了一下css3动画和js动画。主要是工作中为了增强页面的趣味性，大家都有意无意的加入了非常多动画效果。当然大部分都是css3动画效果。能够gpu加速，这会降低移动端的性能需求。 今天主要说的是蜂窝效果。详细效果大家等下能够执行源代码。这里就不放gif图了。 css3的原理非常easy， ...
分类：
Web程序 时间：
2017-06-01 20:59:17
阅读次数：
754
利用css3的新特性可以完成很多图形的构建，下面演示如何利用border的特性构建一个小三角。 我们首先新建一个div，给这个div设置class="demo",然后给demo设置如下属性： .demo{ width: 0; height: 0; border-top: 50px solid bla ...
分类：
Web程序 时间：
2017-05-30 23:08:30
阅读次数：
367
Jquery之所以强大，和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器，而且多出了不少。 所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个: $('*') 匹配页面所有元素 $('#id') id选择器 $('.class') 类选择器 $(' ...
分类：
Web程序 时间：
2017-05-29 10:57:12
阅读次数：
1705
css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。 一、线性渐变linear-gradient 1、介绍 linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色]，[设置结束颜色]) 参数： 第一个参数：指定渐变方向，可以用“角度”的 ...
分类：
Web程序 时间：
2017-05-26 23:26:06
阅读次数：
265
transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。 谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。 transform 属性向元素应用 2D ...
分类：
其他好文 时间：
2017-05-25 11:57:09
阅读次数：
163
1、html代码和jquery代码: 2、scss代码: 评论弹幕的主要思想是重看不到的屏幕位置移动到屏幕看到的位置，最后消失，所以需要移动，这里采用的是css3 的translate 方法，可以实现目标的移动而在移动端不卡顿。 至于每条屏幕的飘移过程中之间的位置关系需要良好的设置，比如间隔时间插入 ...
分类：
Web程序 时间：
2017-05-24 23:59:24
阅读次数：
1670
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。 <style> .container{ width: ...
分类：
其他好文 时间：
2017-05-23 14:16:58
阅读次数：
249
代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。 关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。 HTML代码 CSS代码 ...
分类：
Web程序 时间：
2017-05-22 16:45:05
阅读次数：
181
以webkit内核浏览器为例，语法：div{
width:200px;
height:200px;
background:-webkit-linear-gradient(left,#F39,#09C);
}如图：参数：-webkit-linear-gradient是webkit引擎对渐变的实现参数。第一个参数控制渐变方向，比如left（由左向右）right（由右向左）。第二个和第三个..
分类：
Web程序 时间：
2017-05-18 20:26:21
阅读次数：
198
单位介绍 说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmi ...
分类：
Web程序 时间：
2017-05-18 13:31:09
阅读次数：
267
