摘要：
translateZ()变糊 第一种情况： 当translateZ(m)中的 m设置为 非整数，1.5px 之类的，字体会模糊，但是不明显;和浏览器渲染，字体格式，或者操作系统有关， 这个 css中 只能尽量避免非整数的；js 中 用Math.floor(m)或者Math.cail(m)避免就好; 阅读全文
posted @ 2015-03-23 15:52
surfaces
阅读(5296)
评论(0)
推荐(0)
摘要：
首先看一下效果图; 效果1，主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .five b {transform: scale(0); opacity: 0;} .five:hover b {tran 阅读全文
posted @ 2015-03-18 15:40
surfaces
阅读(405)
评论(0)
推荐(0)
摘要：
首先看一下效果图; 效果1，主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .one a {transform: translateY(100px); opacity:0; 阅读全文
posted @ 2015-03-18 15:31
surfaces
阅读(255)
评论(0)
推荐(0)
摘要：
css3 3d动画 keyframes 前 后 上 bottom 左 右 ... 阅读全文
posted @ 2015-03-09 17:32
surfaces
阅读(766)
评论(0)
推荐(0)
摘要：
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件； css3 的时代，css3--动画 一切皆有可能； 传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件； tra 阅读全文
posted @ 2015-03-09 17:18
surfaces
阅读(36447)
评论(3)
推荐(4)
摘要：
去年面试过一家做网站的 公司，看了一下他们的案例，看懂一个蛮有意思的 ，一个房地产的官网，是用flash做的。感觉不错。 于是，闲暇之际，简单的jquery 模仿做了一下。下面是我的效果图.脚本也没啥优化，流畅度也没有flash流畅。但是重要的是看到这个flash，想到 如何实现它效果的思路，非常适 阅读全文
posted @ 2015-03-03 14:28
surfaces
阅读(1129)
评论(0)
推荐(0)
摘要：
主要知识点：rotate旋转以及 outline透明的像素消除（明显降低）火狐旋转是产生的 锯齿 首先看结构： 结构上没啥特别的，注意 里面的 front 和back 用绝对位置；以防出现问题 直接用 HTML5 API里：classList； 在HTML5 API里，页面DOM里的每个节点上都有一 阅读全文
posted @ 2015-03-02 15:43
surfaces
阅读(6508)
评论(0)
推荐(0)
摘要：
注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合， 利用 锚点对应 id ， 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本 其实还可以利用 css3：target 实现 ，这里就不多做介绍，原理差不多，都是锚点，兼容ie9+ //以下是源代码 拷贝观察即可 阅读全文
posted @ 2015-02-05 11:21
surfaces
阅读(596)
评论(0)
推荐(0)
摘要：
利用 锚点原理 以及overflow:hiden 结合，实现纯 css tab 方式 兼容ie6 + 适合单个tab 不需要js 注意点 红色方框的 a 对应a 必须是 name 如果别的 必须是id 可见我下一篇 css Tab选项卡2 //以下是源代码 <!doctype html><html> 阅读全文
posted @ 2015-01-06 16:15
surfaces
阅读(556)
评论(0)
推荐(1)
浙公网安备 33010602011771号