WD Blog

我干了什么 究竟拿了时间换了什么

css3笔记6 动画优化, animate

"Hello World, Hello Blog"

尽量用transform 因为会减少重排重绘. 董老师说, translate3d 会比 translate 的性能高? 因为 硬件加速? reverse 从100% 移动到 0% alternate 当次数多次时, 偶数次会反向移动 alternate-reverse 从100% 开始移动, 偶数次方向移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

css3笔记5 transform,transition

"Hello World, Hello Blog"

特点: transform 不会影响布局. 感觉应该是为动画而生的. 会先计算 margin,然后计算verticalaline, 根据这些完成dom的基本位置之后,才会计算 transform 也就是说, transform 不会影响 margin,verticalaline 问题1. 以下两种设置的效果是不同的. 1 2 3 item1{ transform: rotateZ(...

css3笔记4 盒模型, flex 弹性布局,三列布局

"Hello World, Hello Blog"

咦,感觉这个层次示意图,比较值钱! 单独放一下. 触发怪异模式的条件 去掉<!DOCTYPE html> 在ie6,以下运行 基本看不到了? w3c: width = content-width; box-sizing: content-box; ie : width = content-width + border + padding; ...

css3笔记3 文本和颜色,报纸布局

"Hello World, Hello Blog"

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69...

css3笔记2 边框,背景

"Hello World, Hello Blog"

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .box{ width: 300px; height: 200px; background-color: #0070A9; border: 27px solid #ccc; ...

css3笔记1 选择器

"Hello World, Hello Blog"

注意: empty 有空格文本的不算 empty 根据:target 做一个选项卡 :target 应该是根据 哈希值确定的, 哈希值唯一锁定元素. 位置的判断会被其他类型的标签影响. 这个就不会受到其他元素标签的影响. 1 2 3 4 5 div:nth-of-type(2n+1) { n 从0 开始 但选取元素从1开始 div:nth-of-ty...

css3 元素居中的几个方法

"Hello World, Hello Blog"

原文参考 纯CSS实现垂直居中的几种方法 html 1 2 3 <div class="wrapper"> <div class="item"></div> </div> 当元素为 block时 position ``` .wrapper{ width: 400px...