原生手写 · 一镜到底特效· 龙年大吉 点击关注公众号，”技术干货”及时达！前言作为一名前端技术开发人员， 我最爱的还是用前端技术实现各种炫酷的特效，对我来说，这不仅是一种样式语言，更是一种表达情感、一种对美好事物追求， 虽然每天要沉浸在代码的海洋里，但也要寻找着技术与艺术的交汇点，努力把吃饭的家伙变成自己热爱的事情。龙年来临之际， 通宵写了一个全新的CSS3 一镜到底的特效案例，如下图， 希望能与大家分享这份创意与激情， 祝各位掘友们新年快乐， 龙年行大运！ 上源码：https://code.juejin.cn/pen/7325352049163796514 整体实现思路介绍?整个案例使用到CSS3 和 HTML技术， 案例的核心知识点 使用到了 CSS3 中的透视 、3D变换、 动画 、无缝滚动等技术要点， 下面我会逐一进行介绍 ?知识点1: 一镜到底特效的 案例的整体布局、设计、及动画思路知识点2：CSS3中的3D坐标系知识点3：CSS3中的3D变换及案例应用知识点4：CSS3中的3D透视及案例应用知识点5：CSS3中的 透视及3d变换的异同点知识点6：CSS3中的 动画及案例应用1、一镜到底特效 的整体布局、设计、及动画思路如下图所示，一镜到底的案例特效 最核心的就是要 构成一套 在3D 空间中， 有多个平行的场景， 然后以摄像机的视角 从前往后 移动，在场景中穿梭， 依次穿过每一个场景的页面即可，自己闭上眼睛来体会一下吧。 对应到本案例中效果就是这样啦： 当然有朋友会说看上图，感觉不到明显的3D 立体效果， 那再来看看下面这个图吧； 上面这张图就是 基于人眼 看不同距离的物体呈现出的结果， 也就是透视效果， 透视效果最核心的特点就是近大远小；而影响看到透视物体大小的一个参数就是消失点距离， 比如消失点越近，最远处的物体会越小， 近大远小的效果越明显， 自己闭上眼睛来体会一下吧。 对应到本案例中效果就是这样啦： 「注意：本案例中 的主要功能是动效， 所以在页面框架布局上，大多使用的都是定位布局， 布局中的基础概念 ‘子绝父相’ 就不用我多说了吧」 上述框架对应的HTML源码如下, 其中.sence-in 内部的子元素是素材，可以先忽略：divclass="sence-boxsence-box1" divclass="sence-in" divclass="text-lefttext-box"掘金多多/div divclass="text-righttext-box"大展鸿图/div divclass="longlong-left"/div divclass="longlong-right"/div divclass="denglong-box"/div divclass="long2long2-left"/div divclass="long2long2-right"/div /div /div divclass="sence-boxsence-box2" divclass="sence-in" divclass="text-lefttext-box"步步高升/div divclass="text-righttext-box"年年有鱼/div divclass="longlong-left"/div divclass="longlong-right"/div divclass="denglong-box"/div divclass="long2long2-left"/div divclass="long2long2-right"/div divclass="xiangyun"/div /div /div divclass="sence-boxsence-box3" divclass="sence-in" divclass="text-lefttext-box"心想事成/div divclass="text-righttext-box"万事如意/div divclass="longlong-left"/div divclass="longlong-right"/div divclass="denglong-box"/div divclass="long2long2-left"/div divclass="long2long2-right"/div divclass="xiangyun"/div /div /div divclass="sence-boxsence-box4" divclass="sence-in" divclass="text-lefttext-box"蒸蒸日上/div divclass="text-righttext-box"一帆风顺/div divclass="longlong-left"/div divclass="longlong-right"/div divclass="denglong-box"/div divclass="long2long2-left"/div divclass="long2long2-right"/div divclass="xiangyun"/div /div /div divclass="sence-boxsence-box5" divclass="sence-in" divclass="text-lefttext-box"自强不息/div divclass="text-righttext-box"恭喜发财/div divclass="sence-block"龙年大吉/div divclass="denglong-box"/div divclass="longlong-left"/div divclass="longlong-right"/div divclass="long2long2-left"/div divclass="long2long2-right"/div divclass="xiangyun"/div /div /div 知识点一：CSS3中的坐标系CSS3中的坐标系，是一切3D 效果的基石， 务必熟练掌握 ， 如下图所示： x轴坐标：左边负，右边正y轴坐标：上边负，下边正z轴坐标：里面负，外面正注意：坐标系的原点在 浏览器的左上角 知识点二：透视(perspective)perspective属性定义了观察者和Z=0平面之间的距离，从而为3D转换元素创建透视效果。上面也说了， 透视的效果就是 近大远小， 上面的截图中也能看到 。这个属性是用来创建3D转换效果的必要属性，因为当我们进行旋转或其他3D转换时，如果透视效果设置得不正确，元素可能会显得很奇怪或不正常。透视的语法如下： 在CSS中，我们可以通过在父元素上设置perspective属性来控制子元素的3D效果。例如： .container { perspective: 1000px; } 在这个例子中，我们为.container元素设置了perspective属性，值为1000px。这意味着任何在这个元素内部的3D转换都会基于这个视距进行透视。 知识点三：3D 变换的核心属性：transform-styletransform-style属性决定了是否保留元素的三维空间布局。当设置为preserve-3d时，它会保留元素内部的三维空间，即使这个元素本身没有进行任何3D转换。这使得子元素可以相对于父元素进行旋转或其他3D转换，而不会影响其他元素。在我们的案例截图中 也能看出在父元素设置了 transform-style: preserve-3d;属性后， 各个场景在 Z轴方向上，已经有了前后距离上的差异了。需要注意的点就是， transform-style属性一定要设置给发生3D变换元素的「父元素」 例如： /* 透视属性加给了 最外层的元素， 保证所有子元素的透视效果是一致的，协调的*/ .perspective-box { transform-style: preserve-3d; } 在这个例子中，我们为.perspective-box元素设置了transform-style属性为preserve-3d，这意味着任何在这个元素内部的3D转换都会保留其三维空间布局。 小技巧：如果你希望自己做的3D场景，立体效果很真实的话， 可以尽量多的给不同的元素，设置在Z轴方向上 设置不同的偏移量， 这样的效果是 摄像机在穿梭的过程中，每一段距离都能看到不同的风景， 层次感会很强， 当然也不要太疯狂， 不然场景会变得混乱哦知识点四、perspective和transform-style的差异和注意点(炒鸡重要！)perspective属性定义了观察者和Z=0平面之间的距离，通俗的说 就是屏幕 到消失点的距离，从而影响3D元素的透视效果, 而transform-style属性决定了是否保留元素的三维空间布局当我们只使用perspective属性时，只有被明确设置为3D转换的元素才会显示透视效果。而当我们使用transform-style: preserve-3d时，即使元素本身没有进行任何3D转换，其子元素也可以进行3D转换并保留三维空间布局。「注意：perspective属性，只能带来近大远小的透视视觉效果，并不能构成真正的3D空间布局。真正的3D布局必须依赖于transform-style: preserve-3d属性来实现」 知识点五、animation动画的定义和使用CSS动画是一种使元素从一种样式逐渐改变为另一种样式的方法。这个过程是通过关键帧（keyframes）来定义的，关键帧定义了动画过程中的不同状态。在一镜到底的案例中， 整个场景的前后移动，用的就是动画属性。 动画的使用分为两步， 具体使用方式如下： 1.使用@keyframes 来定义动画2.使用animation属性来调用动画， @keyframesrotate{ from{transform:rotateX(0deg);} to{transform:rotateX(360deg);} } 在这个例子中，我们定义了一个名为“rotate”的关键帧动画，使元素从X轴的0度旋转到360度。然后，我们可以通过将这个动画应用到HTML元素上来使用它： .perspective-content{ animation:rotate5sinfinitelinear; } 在这个例子中，我们将“rotate”动画应用到.cube元素上，设置动画时间为5秒，无限循环，并且线性过渡; 在一镜到底的案例中， 我们定义的动画如下： @keyframesperspective-content{ 0%{ transform:translateZ(0px); } 50%{ transform:translateZ(6000px); } 50.1%{ transform:translateZ(-6000px); } 100%{ transform:translateZ(0px); } } 上午动画 其实做了一个无线循环轮播的逻辑， 就是当 在Z轴方向上 从 0 移动到 6000距离以后， 在重置到-6000px, 这样就可以在从-6000继续向前移动， 移动到 0 ，达到一个循环， 再开始下一次的循环； 小技巧：你可以把动画 单独加给每个场景（可能有10多个子元素， 你的重复写10多遍，会很麻烦的），也可以把动画加给公共的父元素，父元素会带着里面的子元素一起动， 这样只用写一次就行哦。结束语：以上就是案例用到的所有知识点啦， 整个案例的代码，可以在顶部源码位置查看，我就不一一解释了， 如有疑问和建议，可以留言，一起探讨学习哦， 本人能力有限， 希望大家多多批评指导； 点击关注公众号，”技术干货”及时达！ 阅读原文