web

爆肝手写 · 一镜到底特效· 龙年大吉【CSS3】

前言

作为一名有多年开发经验的前端技术开发人员，我最爱的还是用前端技术实现各种炫酷的特效，对于我来说，CSS3不仅仅是一种样式语言，更是一种表达情感、对美好事物追求的一种体现吧，虽然每天要沉浸在代码的海洋里，但我也要寻找着技术与艺术的交汇点，努力把吃饭的家伙变成自己的热爱的事情。龙年来临之际，通宵写了一个全新的CSS3 一镜到底的特效案例，如下图，希望能与大家分享这份创意与激情，祝各位掘友们新年快乐，龙年行大运！

Video_20240120111316[00_00_12--00_00_15].gif

上源码：

整体实现思路介绍

整个案例使用到CSS3 和 HTML技术，案例的核心知识点使用到了 CSS3 中的透视、3D变换、动画、无缝滚动等技术要点，下面我会逐一进行介绍

知识点1: 一镜到底特效的案例的整体布局、设计、及动画思路
知识点2：CSS3中的3D坐标系
知识点3：CSS3中的3D变换及案例应用
知识点4：CSS3中的3D透视及案例应用
知识点5：CSS3中的透视及3d变换的异同点
知识点6：CSS3中的动画及案例应用

1、一镜到底特效的整体布局、设计、及动画思路

如下图所示，一镜到底的案例特效最核心的就是要构成一套在3D 空间中，有多个平行的场景，然后以摄像机的视角从前往后移动，在场景中穿梭，依次穿过每一个场景的页面即可啦，自己闭上眼睛来体验一下吧；
无标题.png

对应到本案例中效果就是这样啦：

当然有朋友会说看上图，感觉不到明显的3D 立体效果，那再来看看下面这个图吧；

消失点.png

上面这张图就是基于人眼看不同距离的物体呈现出的结果，也就是透视效果，透视效果最核心的特点就是近大远小；而影响看到透视物体大小的一个参数就是消失点距离，比如消失点越近，最远处的物体会越小，近大远小的效果越明显，自己闭上眼睛来体验一下吧；

对应到本案例中效果就是这样啦：

上述框架对应的HTML源码如下, 其中.sence-in 内部的子元素是素材，可以先忽略：

<div class="sence-box sence-box1">
<div class="sence-in">
<div class="text-left text-box">掘金多多</div>
<div class="text-right text-box">大展鸿图</div>
<div class="long long-left"></div>
<div class="long long-right"></div>
<div class="denglong-box"></div>
<div class="long2 long2-left"></div>
<div class="long2 long2-right"></div>
</div>
</div>
<div class="sence-box sence-box2">
<div class="sence-in">
<div class="text-left text-box">步步高升</div>
<div class="text-right text-box">年年有鱼</div>
<div class="long long-left"></div>
<div class="long long-right"></div>
<div class="denglong-box"></div>
<div class="long2 long2-left"></div>
<div class="long2 long2-right"></div>
<div class="xiangyun"></div>
</div>
</div>
<div class="sence-box sence-box3">
<div class="sence-in">
<div class="text-left text-box">心想事成</div>
<div class="text-right text-box">万事如意</div>
<div class="long long-left"></div>
<div class="long long-right"></div>
<div class="denglong-box"></div>
<div class="long2 long2-left"></div>
<div class="long2 long2-right"></div>
<div class="xiangyun"></div>
</div>
</div>
<div class="sence-box sence-box4">
<div class="sence-in">
<div class="text-left text-box">蒸蒸日上</div>
<div class="text-right text-box">一帆风顺</div>
<div class="long long-left"></div>
<div class="long long-right"></div>
<div class="denglong-box"></div>
<div class="long2 long2-left"></div>
<div class="long2 long2-right"></div>
<div class="xiangyun"></div>
</div>
</div>
<div class="sence-box sence-box5">
<div class="sence-in">
<div class="text-left text-box">自强不息</div>
<div class="text-right text-box">恭喜发财</div>
<div class="sence-block">龙年大吉</div>
<div class="denglong-box"></div>
<div class="long long-left"></div>
<div class="long long-right"></div>
<div class="long2 long2-left"></div>
<div class="long2 long2-right"></div>
<div class="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-style

transform-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属性来调用动画，


@keyframes rotate {  
from { transform: rotateX(0deg); }  
to { transform: rotateX(360deg); }  

	}

在这个例子中，我们定义了一个名为“rotate”的关键帧动画，使元素从X轴的0度旋转到360度。然后，我们可以通过将这个动画应用到HTML元素上来使用它：

	.perspective-content {  
animation: rotate 5s infinite linear;  

	}

在这个例子中，我们将“rotate”动画应用到.cube元素上，设置动画时间为5秒，无限循环，并且线性过渡;

在一镜到底的案例中，我们定义的动画如下：


@keyframes perspective-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多遍，会很麻烦的），也可以把动画加给公共的父元素，父元素会带着里面的子元素一起动，这样只用写一次就行哦；

结束语：

以上就是案例用到的所有知识点啦，整个案例的代码，可以在顶部源码位置查看，我就不一一解释了，如有疑问和建议，可以留言，一起探讨学习哦，本人能力有限，希望大家多多批评指导；

作者：IT大春哥
来源：juejin.cn/post/7325739662033879090

0

2024-01-22

0 个评论

要回复文章请先登录或注册

爆肝手写 · 一镜到底特效· 龙年大吉 【CSS3】

前言