CSS动画实现3D隧道效果

效果如下：

Rec 0002

主要是利用多个盒子，CSS3通过animation、var()、calc()函数实现动画特效

HTML中的代码如下：

<div class="box"><div class="farme" style="--i:1"></div><div class="farme" style="--i:2"></div><div class="farme" style="--i:3"></div><div class="farme" style="--i:4"></div><div class="farme" style="--i:5"></div><div class="farme" style="--i:6"></div><div class="farme" style="--i:7"></div><div class="farme" style="--i:8"></div><div class="farme" style="--i:9"></div><div class="farme" style="--i:10"></div><div class="farme" style="--i:11"></div><div class="farme" style="--i:12"></div><div class="farme" style="--i:13"></div><div class="farme" style="--i:14"></div><div class="farme" style="--i:15"></div><div class="farme" style="--i:16"></div><div class="farme" style="--i:17"></div><div class="farme" style="--i:18"></div><div class="farme" style="--i:19"></div><div class="farme" style="--i:20"></div><div class="farme" style="--i:21"></div><div class="farme" style="--i:22"></div><div class="farme" style="--i:23"></div><div class="farme" style="--i:24"></div><div class="farme" style="--i:25"></div><div class="farme" style="--i:26"></div><div class="farme" style="--i:27"></div><div class="farme" style="--i:28"></div><div class="farme" style="--i:29"></div><div class="farme" style="--i:30"></div></div>

要实现div转动的效果，需要30个小盒子来组成我们的圈盒子，里面加上 style 样式: --i :num 这样我们获取到后面的数值。

盒子居中：

*{margin: 0;padding: 0;box-sizing: border-box;
}
body{height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #000;overflow: hidden;
}

使用 flex 布局，讲盒子定位到正中央的位置。

设置 box 盒子大小

.box{position: relative;width: 100px;height: 100px;
}

设置 farme盒子大小以及动画：

.farme{width: 100%;height: 100%;border: 1px solid rgb(0, 255, 162);filter: hue-rotate(cale(24deg * var(--i)));position: absolute;transform-style: preserve-3d;animation: move 30s linear infinite calc(1s * var(--i) - 30s);
}
/* 动画 */
@keyframes move {0%{transform: perspective(1000px) translateZ(0px);}100%{transform: perspective(1000px) translateZ(1000px) rotate(180deg);}
}

通过 var (–i) 我们就可以获取到该标签 style 里面 i 的num值；

想要看出3D的效果，首先要设置的属性就是透视per，Z轴移动本着离我们的眼睛距离为，近大远小；

利用filter中的hue-rotate效果给图像应用色相旋转；

最后应用写好的动画就完成了。

总结：

形成3D空间,浏览器只是多了一条Z轴可以进行操作,浏览器不会有任何的变化;

、

CSS动画实现3D隧道效果相关推荐

HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
基础css动画制作鼠标移入效果
这是我的第一篇文章, 算是比较基础的css效果, 如果有什么写的不好的, 希望能让各位大佬给点意见或建议. 这是一个鼠标移入的显示效果, 效果图如下: 首先是布局: 我们使用无序列表(当然,一般在ul ...
html向下滑动动画,CSS动画:(向下滑)slidedown效果_html/css_WEB-ITnose
我们依据上一篇文章的HTML代码结构,来实现一般焦点图片跳转时候的效果. HTML CSS .outer_box { width: 100px; height: 100px; border: #bbb ...
css 动画呼吸呼吸灯效果
<div class="yellow"></div> 使用 CSS3 animation(动画) 属性实现动画效果 .yellow {position: ...
html惊喜盒子效果,网页设计之css炫酷3d盒子效果
EasyDemo*CSS概述及样式表知识点个人总结(一&&二) 一.CSS CSS概述 1.1.1CSS的作用 1.1.2什么是CSS *CSS:层叠样式表,简称样式表 *用于html ...
css动画，实现落叶效果
实现叶子的下落效果:旋转和降落.直接上代码: <div class="con"><img src="img/yeluobig.png" id= ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...