【纯CSS3】一镜到底特效·龙年大吉

前言

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

【纯CSS3】一镜到底特效·龙年大吉

上源码:

整体实现思路介绍

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

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

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

如下图所示,一镜到底的案例特效 最核心的就是要 构成一套 在3D 空间中, 有多个平行的场景, 然后以摄像机的视角 从前往后 移动,在场景中穿梭, 依次穿过每一个场景的页面即可啦,自己闭上眼睛来体验一下吧;
【纯CSS3】一镜到底特效·龙年大吉

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

【纯CSS3】一镜到底特效·龙年大吉

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

【纯CSS3】一镜到底特效·龙年大吉

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

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

【纯CSS3】一镜到底特效·龙年大吉

  • 上述框架对应的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轴坐标:里面负,外面正
  • 注意: 坐标系的原点在 浏览器的左上角

【纯CSS3】一镜到底特效·龙年大吉

知识点二: 透视(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;  
}

在这个例子中,我们为.container元素设置了transform-style属性为preserve-3d,这意味着任何在这个元素内部的3D转换都会保留其三维空间布局。

  • 小技巧:如果你希望自己做的3D场景,立体效果很真实的话, 可以尽量多的给不同的元素,设置在Z轴方向上 设置不同的偏移量, 这样的效果是 摄像机在穿梭的过程中,每一段距离都能看到不同的风景, 层次感会很强, 当然也不要太疯狂, 不然场景会变得混乱哦

知识点四、perspective和transform-style的差异和注意点

  • perspective属性定义了观察者和Z=0平面之间的距离,从而影响3D元素的透视效果。而transform-style属性决定了是否保留元素的三维空间布局。
  • 当我们只使用perspective属性时,只有被明确设置为3D转换的元素才会显示透视效果。而当我们使用transform-style: preserve-3d时,即使元素本身没有进行任何3D转换,其子元素也可以进行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多遍,会很麻烦的),也可以把动画加给公共的父元素,父元素会带者里面的子元素一起东, 这样只用写一次就行哦;

结束语:

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

原文链接:https://juejin.cn/post/7325739662033879090 作者:IT大春哥

(0)
上一篇 2024年1月20日 下午4:10
下一篇 2024年1月20日 下午4:21

相关推荐

发表回复

登录后才能评论