摘要: translateZ()变糊 第一种情况: 当translateZ(m)中的 m设置为 非整数,1.5px 之类的,字体会模糊,但是不明显;和浏览器渲染,字体格式,或者操作系统有关, 这个 css中 只能尽量避免非整数的;js 中 用Math.floor(m)或者Math.cail(m)避免就好; 阅读全文
posted @ 2015-03-23 15:52 surfaces 阅读(5209) 评论(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 阅读(385) 评论(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 阅读(248) 评论(0) 推荐(0) 编辑
摘要: css3 3d动画 keyframes 前 后 上 bottom 左 右 ... 阅读全文
posted @ 2015-03-09 17:32 surfaces 阅读(756) 评论(0) 推荐(0) 编辑
摘要: 上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件; css3 的时代,css3--动画 一切皆有可能; 传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件; tra 阅读全文
posted @ 2015-03-09 17:18 surfaces 阅读(35976) 评论(3) 推荐(4) 编辑
摘要: 去年面试过一家做网站的 公司,看了一下他们的案例,看懂一个蛮有意思的 ,一个房地产的官网,是用flash做的。感觉不错。 于是,闲暇之际,简单的jquery 模仿做了一下。下面是我的效果图.脚本也没啥优化,流畅度也没有flash流畅。但是重要的是看到这个flash,想到 如何实现它效果的思路,非常适 阅读全文
posted @ 2015-03-03 14:28 surfaces 阅读(1113) 评论(0) 推荐(0) 编辑
摘要: 主要知识点:rotate旋转以及 outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿 首先看结构: 结构上没啥特别的,注意 里面的 front 和back 用绝对位置;以防出现问题 直接用 HTML5 API里:classList; 在HTML5 API里,页面DOM里的每个节点上都有一 阅读全文
posted @ 2015-03-02 15:43 surfaces 阅读(6347) 评论(0) 推荐(0) 编辑
摘要: 注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合, 利用 锚点对应 id , 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本 其实还可以利用 css3:target 实现 ,这里就不多做介绍,原理差不多,都是锚点,兼容ie9+ //以下是源代码 拷贝观察即可 阅读全文
posted @ 2015-02-05 11:21 surfaces 阅读(584) 评论(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 阅读(543) 评论(0) 推荐(1) 编辑