随笔分类 - css
摘要：参考文档： http://blog.csdn.net/xwqqq/article/details/54862279 https://github.com/amfe/lib-flexible/tree/master http://blog.csdn.net/ful1021/article/detail
阅读全文
摘要：写css3动画的时候，我们经常用到animation来实现，默认情况下，animation是属于连贯性的ease动画。我们熟悉的animation动画有ease、ease-in、ease-out、linear、cubic-bezier等补间过段函数，当然还有我们可能不是很熟悉的steps跳帧函数。我
阅读全文
摘要：ie6的老bug了，select老是会挡住 弹层里的内容。解决办法：（box需要设置高度） 我是内容
阅读全文
摘要：/* 兼容iphone4/4s */@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){}/* 兼容iphone5 */@media (device-height:568px) and (-webkit-min-de...
阅读全文
摘要：http://www.w3school.com.cn/cssref/pr_box-sizing.aspbox-sizing: content-box|border-box|inherit;值描述content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和...
阅读全文
摘要：column的布局形式还没有使用过，后续的bug和解决方案有待检验。columncolumn-count：number； 设置内容分为多少栏显示column-width：长度单位；设置每一栏的宽度而不设定元素的宽度column-gap:长度单位;设置多栏之间的间隔距离column-rule:宽度，颜...
阅读全文
摘要：mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.htmlmask 的属性：-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/-webkit-mask-repeat:repeat ...
阅读全文
摘要：perspective && perspective-originperspective是物体相对于画布的视距距离perspective-origin是物体在画布位置的中心视点transform3dtransform-origin 旋转中心
阅读全文
摘要：先发个3D盒子最终效果图在线效果预览：http://dtdxrk.github.io/game/css3-demo/box-3d.html制作步骤1：创建基本结构分布把6个面定义到3×3的画布上，1和4暂且是重叠的。html结构比较简单： 1 2 3 4 5 6 CSS部分： *{ma...
阅读全文
摘要：先上效果图：就是用js计算每个小圆的位置分布到大圆的边线上，然后在让大圆旋转起来。线上查看地址：http://dtdxrk.github.io/game/css3-demo/diffuse.html用到了上学时基础的数学知识
阅读全文
摘要：transform 2d变形实例练习：练习了旋转 倾斜 缩放的功能 transform
阅读全文
摘要：现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。要实现这个效果很简单，只需要在元素上加一行css代码即可：-webkit-overflow-scrolling : touch; 实际上，Safari真的用了原生控件来实现，对于有-webki...
阅读全文
摘要：今天看页面发现一个以前没用过的css属性text-align:justify，查了一下非常实用，是一个实现文本两端对齐的属性。使用前：使用后：看了一些文章还有结合inline-block+text-align:justify 对齐布局的，出于兼容的问题，我还是倾向浮动处理，有兴趣的可以自己搜一下。
阅读全文
摘要：「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持...
阅读全文
摘要：CSS3 filter和IE的filter完全是两样东东。Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。语法 elm { filter: none | [ ]* } 其默认值是none，他不具备继承...
阅读全文
摘要：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。w3Schollhttp://www.w3school.com.cn/cssref/pr_transform.asp浏览器支持transform: none|transform-function...
阅读全文
摘要：CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。w3school在线文档说明http://www.w3school....
阅读全文
摘要：CSS3的动画应用越来越多了，Animate.css一个从名字上就知道干什么的动画框架。github上的访问地址：http://daneden.github.io/animate.css/使用方法引用css 然后在需要动画效果的元素上添加animated和网页上显示的API的名字即可，比如：简单吧！...
阅读全文
摘要：CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；Animation主要是对元素实现了一些基本的动画效果，它只能应用在页面的DOM元素上。Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个...
阅读全文
摘要：CSS Media Queries直译过来就是“媒体查询”，我们可以通俗易懂的理解为根据媒体设备展示不同的样式。例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。看下这个在线演示，调整你的浏览器窗口尺寸，...
阅读全文
