CSS3 学习笔记

发表于 | 分类于

学习 CSS 很久了，学习 CSS3 也很久了，但一直没有下定决心去写一篇文章给他，因为总觉得自己尽管背了很多，试用了很多，但总是不够了解他，总会从犄角旮旯的地方蹦出个文章刷新我的认识。。。

但现在我决定徐徐而图之，像挤牙膏一样一点一点挤出来，他就那么大，总会挤完的。。。

每个属性都有自己的特性

认识到这个是在一次面试之后，面试官问我垂直居中的css写法，明明火车上有看过这道题，结果和面试官一说话，就忘了。。。加上之前的工作确实没有用过，没有答上来，然后一路气弱到结束，损失了进入一家北京大型游戏公司的机会，伤心的不想继续面试，但就像自己说的：“心情和学习没关系，学习不该停止”。

回来仔细在网上找文章，看到一个词，特性，立刻似乎打开了新世界，在这里，垂直居中有种方法：

1
2
3
4
5
6
.center {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

看起来平平无奇，其实内藏玄机，为什么通过定位向下移动50%，再通过 2d 变换向上移动50%会让本元素垂直居中呢，

原来，top 属性的特性是值为百分比时，此百分比是相对于父元素的，类似的还有 padding、margin；

然后 translate 百分比取值却是相对自己的；

所以让子元素的上边下降父元素的一半，然后向上移动自己的一半，恰好视觉效果就是相对父元素居中。

是不是很神奇，当然也许你早就知道了，但以此为拓展，你可以想象，肯定不止是他，很多属性都会像这样百分比取值时有的相对父元素，有的相对自己，

那是不是还有很多属性是有只有自己的特性，然后特性和特性的组合不就可以实现很多炫酷的效果么，笑。

好吧，其实我现在只能举这一个例子，确实不够酷，但他的意义显然不止如此，他却是足够引起你的兴趣，至少不是像别人说的css 简单到简只要背就好。

这是一种冥冥中的第六感，促使我看待问题时尝试换着角度去看。

另一方面，css 和算法

某一天，看到生活大爆炸有一集片头字幕方式让我想起小时候看的超人电视剧片头，然后就想着也许可以试试用 前端去实现。

第一印象还是使用 js 实现，原谅我花在 js 上的时间超过 HTML + CSS 的两倍还多。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let bevelps = document.querySelectorAll('.bevel p');
// js 来写动画，卡顿明显
superman(bevelps);
function superman (doms) {
    for (let i = 0; i < bevelps.length; i++) {
        setTimeout(() => {
            moveBe(bevelps[i])
        }, 400 * i);
    }
    function moveBe(dom) {
        let num = 500;
        let speed = 1;

        let timer = setInterval(() => {
            num -= 1 * speed;
            dom.style.transform = `perspective(600px) rotateX(45deg) translateY(${num}px)`
            if (num <= 100) dom.style.opacity = `${num / 100}`
            if (num <= 0) clearInterval(timer);
        }, 1000 / 60)
    }
}

主要逻辑如上，让字幕倾斜 45° ，然后自身 3D Y 轴移动，动画就动起来了，当然，我们希望字幕是一条一条地出现，又一条一条地消失， 所以向异步盒子里推时间倍数增长的一次性定时器；

实际效果出来后，画面像跳跳虎，一弹一弹地。。。原因显然是浏览器处理能力不行，丢帧严重。

所以改变思路，使用 css3 animate 实现效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.bevel p {
    transform: perspective(600px) rotateX(45deg) translateY(600px);
}
@keyframes move {
    0% {
        transform: perspective(600px) rotateX(45deg) translateY(600px);
        color: #000;
    }
    92% {
        transform: perspective(600px) rotateX(45deg) translateY(48px);
        color: #999;
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: perspective(600px) rotateX(45deg) translateY(0);
    }
}
```  

卡顿明显改善，但好像单纯地 css 无法做到任意条字幕流畅执行，加了一点 js。

var doms = document.querySelectorAll(‘.bevel p’);
setStyle(doms)
function setStyle(doms) {
let style = document.createElement(‘style’)

for(let i = 1; i < doms.length + 1; i++) {
    style.innerHTML += `.bevel p:nth-child(${i}) {animation: move 8s linear ${0.768 * i}s forwards;}`
}

document.querySelector('head').appendChild(style)

}
`

效果不错，笑。