你所不知道道的 CSS 动漫技能与细节

怕题目起的有点大，下述技能假如你早已把握了看看就好，欢迎指正，本文期待根据详细介绍1些 CSS 不太常见的技能，辅以1些实践活动，让读者能够更为深层次的了解把握 CSS 动漫。

空话少说，立即进到正题，本文提到的动漫不加独特表明，皆指 CSS 动漫。

正负转动相消

嗯。姓名起的很怪异，仿佛数学课定义1样。

在动漫中，转动是是非非经常用的特性，

{
  transform: rotate(90deg);
}

那转动有1些甚么高級点的技能呢？自然是能够更改 transfrom-origin ，更改转动管理中心点啦。

开个玩笑话，更改转动管理中心点这个估算大伙儿都了解了，这里要详细介绍的技能是运用父级元素正反两个方位的转动，来制做1些炫酷的 3d 实际效果。

最先假定1结局景，大家有这样的1层 HTML 构造：

<div class="reverseRotate">
    <div class="rotate">
        <div class="content">正负转动相消三d动漫</div>
    </div>
</div>

款式以下：

.content 内是大家的关键內容，好了，如今想像1下，假如先祖元素 .rotate 开展顺向 linear 360° 转动，父级元素 .reverseRotate 开展反方向 linear 360° 转动，实际效果回是啥样？

CSS 编码以下：

.rotate {
    animation: rotate 5s linear infinite; 
}
.reverseRotate {
    animation: reverseRotate 5s linear infinite; 
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes reverseRotate {
    100% {
        transform: rotate(⑶60deg);
    }
}

奇异！由于1正1反的转动，且缓动涵数1样，因此全部 content 看上去仍然是静止不动的！留意，这里全部 content 静止不动的十分关键。

有读者看到这里就要骂街了，作者你个智障，静止不动了不就没动漫了吗？哪来的动漫技能？

别急！尽管看上去是静止不动的，可是实际上先祖两个元素全是在转动的！这会看上去晴空万里的实际效果底下实际上是暗潮涌动。用开发设计者专用工具选择最外层先祖元素是这样的：

既然这般，大家再次思索，假如我在这其中转动的1个先祖元素上，加上1些其他动漫会是甚么实际效果？想一想就很刺激性啊。

以便和创意文案里边的 三d 动漫扯上关联，大家先给这几个元素加上 三d 变换：

div {
    transform-style: preserve⑶d;
    perspective: 500px;
}

接着，尝试改动上面的转动动漫，在里层转动上附加加上1个 rotateX：

@keyframes rotate {
    0% {
        transform: rotateX(0deg) rotateZ(0deg);
    }
    50% {
        transform: rotateX(40deg) rotateZ(180deg);
    }
    100% {
        transform: rotateX(0deg) rotateZ(360deg);
    }
}

实际效果以下：

Wow，这里必须好好了解1下。因为內容 content 层是静止不动的但实际上外层两个涂层都在转动，根据设定附加的 rotateX(40deg) ，非常于叠加多了1个动漫，因为正反转动相抵了，全部全部动漫只能看到转动的 rotateX(40deg) 这个动漫，造成了上述的实际效果。

CodePen Demo -- Css正负转动相消动漫

动漫同样，缓动不一样

好的，再次下1个小窍门。

有的情况下大家网页页面存在1些具备同样动漫的元素，以便让动漫不那末呆板，大家能够给同样的动漫，授予不一样的缓动涵数，来做到动漫实际效果。

假定大家有以下的构造：

<div class="container">
    <div class="ball ball1"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>
</div>

款式以下：

大家给它们同样的动漫，可是授予不1样的缓动涵数（animation-timing-function），就像这样：

.ball1 {
    animation: move 1s ease-in infinite alternate;
}
.ball2 {
    animation: move 1s linear infinite alternate;
}
.ball3 {
    animation: move 1s ease-out infinite alternate;
}
@keyframes move {
    100% {
        transform: translateY(5vw);
    }
}

这样，1个简易的 loading 实际效果就制做好了。（自然这个技能较为简易，学汇合理应用是重要）

CodePen Demo -- 动漫同样，缓动不一样

奇特的缓动

缓动涵数 timing-function 在动漫中占有了十分关键的影响力。

当你不想应用 CSS 默认设置出示的 linear、ease-in、ease-out 之类缓动涵数的，能够自定 cubic-bezier(1, 1, 0, 0)，这里有个十分功能强大的专用工具强烈推荐，下面这个网站，能够便捷的调出你必须的缓动涵数而且拿到对应的 cubic-bezier 。

cubic-bezier.com

过渡撤销

大家在制做网页页面的情况下，以便让网页页面更为有互动感，会给按钮，黑影，色调等款式加上过渡实际效果，相互配合 hover 1起应用。

这个是基本逻辑思维，假如大家的元素1刚开始是沒有过渡实际效果，仅有 hover 上去才给它加上1个过渡，又或1刚开始元素是有过渡实际效果的，当大家 hover 上去时，撤销它的过渡，会碰撞出甚么样的火苗呢？

应用这个技能（或许算不上技能，纯碎好玩），大家能够制做出1些趣味的实际效果，比如下面这个觉得是运用就 JS 才进行的动漫，实际上是纯 CSS 动漫：

实际上就小圆圈是元素默认设置是带有 transition 的，仅有在 hover 上去的情况下，撤销它的过渡，简易的全过程：

• 因为1刚开始它的色调的全透明的，而 hover 的情况下会授予它色调值，可是因为 hover 时过渡被撤销了，全部它会立即显示信息。
• hover 离去的情况下，它的本来的过渡又回家了，这个情况下它会从有色调到全透明值迟缓渐变色消退。
   

能够戳这里体会1下：

CodePen Demo -- Cancle transition

动漫等级的操纵，维持动漫等级在最上方

这个难题将会有1点难了解。必须掌握 CSS 动漫3D渲染提升的有关专业知识。

先说结果，动漫等级的操纵的意思是尽可能让必须开展 CSS 动漫的元素的 z-index 维持在网页页面最上方，防止访问器建立无须要的图型层（GraphicsLayer），可以很好的提高3D渲染特性。

OK，再1次提到了图型层（GraphicsLayer），这是1个访问器3D渲染基本原理有关的专业知识（WebKit/blink核心下）。

简易来讲，访问器以便提高动漫的特性，以便在动漫的每帧的全过程中无须每次都再次绘图全部网页页面。在特殊方法下能够开启转化成1个生成层，生成层有着独立的 GraphicsLayer。

必须开展动漫的元素包括在这个生成层之下，这样动漫的每帧只必须去再次绘图这个 Graphics Layer 便可，从而做到提高动漫特性的目地。

那末1个元素何时会开启建立1个 Graphics Layer 层？从现阶段来讲，考虑下列随意状况便会建立层：

• 硬件配置加快的 iframe 元素（例如 iframe 嵌入的网页页面中有生成层）
• 硬件配置加快的软件，例如 flash 这些
• 应用加快视頻解码的 元素
• 三d 或 硬件配置加快的 2D Canvas 元素
• 三d 或透視转换(perspective、transform) 的 CSS 特性
• 对自身的 opacity 做 CSS 动漫或应用1个动漫转换的元素
• 有着加快 CSS 过虑器的元素
• 元素有1个包括复合型层的子孙后代连接点(换句话说，便是1个元素有着1个子元素，该子元素在自身的层里)
• 元素有1个 z-index 较低且包括1个复合型层的弟兄元素

本题中说到的动漫等级的操纵，缘故就在于上面转化成层的最终1条：

元素有1个 z-index 较低且包括1个复合型层的弟兄元素。

这里是存在坑的地区，最先大家要确立两点：

1. 大家期待大家的动漫获得 GPU 硬件配置加快，因此大家会运用相近 transform: translate3d() 这样的方法转化成1个 Graphics Layer 层。
2. Graphics Layer 虽好，但并不是越多越好，每帧的3D渲染核心都会去遍历测算当今全部的 Graphics Layer ，并测算她们下1帧的重绘地区，因此过多的 Graphics Layer 测算也会给3D渲染导致特性危害。

记牢这两点以后，返回上面大家说的坑。

假定大家有1个轮播图，有1个 ul 目录，构造以下：

<div class="container">
    <div class="swiper">轮播图</div>
    <ul class="list">
        <li>目录li</li>
        <li>目录li</li>
        <li>目录li</li>
        <li>目录li</li>
    </ul>
</div>

假定给她们界定以下 CSS：

.swiper {
    position: static;
    animation: 10s move infinite;
} 
.list {
    position: relative;
}
@keyframes move {
    100% {
        transform: translate3d(10px, 0, 0);
    }
}

因为给 .swiper 加上了 translate3d(10px, 0, 0) 动漫，因此它会转化成1个 Graphics Layer，以下图所示，用开发设计者专用工具能够开启层的展现，图型外的黄色边框即意味着转化成了1个单独的复合型层，有着单独的 Graphics Layer 。

<

可是！在上面的图中，大家并沒有给下面的 list 也加上任何能开启转化成 Graphics Layer 的特性，可是它也一样也是有黄色的边框，转化成了1个单独的复合型层。

缘故在于上面那条元素有1个 z-index 较低且包括1个复合型层的弟兄元素。大家其实不期待 list 元素也转化成 Graphics Layer ，可是因为 CSS 等级界定缘故，下面的 list 的等级高于上面的 swiper，因此它处于被动的也转化成了1个 Graphics Layer 。

应用 Chrome，大家还可以观查到这类等级关联，能够看到 .list 的等级高于 .swiper：

因此，下面大家改动1下 CSS ，改为：

.swiper {
    position: relative;
    z-index: 100;
}   
.list {
    position: relative;
}

这里，大家确立使得 .swiper 的等级高于 .list ，再开启开发设计者专用工具观查1下：

能够看到，这1次，.list 元素早已沒有了黄色外边框，表明此时沒有转化成 Graphics Layer 。再看看等级图：

此时，等级关联才是大家期待看到的，.list 元素沒有开启转化成 Graphics Layer 。而大家期待必须硬件配置加快的 .swiper 维持在最上方，每次动漫全过程中只会单独重绘这一部分的地区。

总结

• GPU 硬件配置加快也会有坑，当大家期待应用运用相近 transform: translate3d() 这样的方法打开 GPU 硬件配置加快，1定要留意元素等级的关联，尽可能维持让必须开展 CSS 动漫的元素的 z-index 维持在网页页面最上方。
• Graphics Layer 并不是越多越好，每帧的3D渲染核心都会去遍历测算当今全部的 Graphics Layer ，并测算她们下1帧的重绘地区，因此过多的 Graphics Layer 测算也会给3D渲染导致特性危害。
• 可使用 Chrome ，用上面详细介绍的两个专用工具对自身的网页页面转化成的 Graphics Layer 和元素等级开展观查随后开展相应改动。
• 上面观查网页页面等级的 chrome 专用工具十分吃运行内存？仿佛還是1个处在试验室的作用，剖析略微大1点的网页页面非常容易立即卡死，因此要多学会应用第1种观查黄色边框的方法查询网页页面转化成的 Graphics Layer 这类方法。

数据动漫

许多技能独立拿出来将会都显得较为薄弱，我感觉最关键的是平常多累积，学会融汇贯通，在具体新项目中灵便组成应用，近期新项目必须1个较为颇具高新科技感的数据计数器，展现线上人数的持续提升。由于是內部要求，沒有设计方案稿，靠前端开发随意充分发挥。

应用了上面提到的1些小窍门，参照了1些 CodePen 上的实际效果，整了个下述的 三d 数据计数实际效果，纯 CSS 完成，实际效果图以下：

总结

以上所述是网编给大伙儿详细介绍的你所不知道道的 CSS 动漫技能与细节，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！