当前位置：首页 > 科技观察

3D穿梭效应？周末在家使用CSS轻松搞定

时间：2023-03-12 22:49:02 科技观察

后台习惯性登录Apex，准备玩几局。在登录加速器的过程中，发现加速器已经过期。我一直在用腾讯网游加速器，但是点充值按钮的时候提示客户端最近升级了，暂时不支持充值（这个操作吓到我了~）。只能转身下载**网易UU加速器**[1]。打开UU加速器首页，映入眼帘的是这样一张图片：瞬间，你就被它的背景图所吸引。出于对CSS的敏感，我盲目猜测这是用CSS实现的，至少应该是Canvas。打开控制台，有点失望，居然是一个.mp4文件：再看网络面板，这个.mp4文件居然需要3.5M？emm，一时不想玩游戏。这样的背景图，CSS搞不定？用CSS3D实现星际3D穿梭效果，我在想CSS3D动画|仅使用CSS可以制作出多么神奇的动画？[2]里面也提到了，有兴趣的可以一起看看。假设我们有这样一个图：这个图先放在一边。在使用这张图之前，我们先画这样一个图形：left">

body{background:#000;}.g-container{position:relative;}.g-group{position:absolute;width:100px;height:100px;left:-50px;top:-50px;transform-style:preserve-3d;}.item{position:absolute;width:100%;height:100%;background:rgba(255,255,255,.5);}.item-right{background:red;transform:rotateY(90deg)translateZ(50px);}.item-left{background:green;transform:rotateY(-90deg)translateZ(50px);}.item-top{background:blue;transform:rotateX(90deg)translateZ(50px);}.item-bottom{background:deeppink;transform:rotateX(-90deg)translateZ(50px);}.item-middle{background:rgba(255,255,255,0.5);transform:rotateX(180deg)translateZ(50px);}一共设置了5个子元素，但是仔细看css代码，其中4个设置为rotateX/Y(90deg/-90deg)，即绕X轴或Y轴旋转90°，视觉上是垂直于屏幕的一个平面，所以视觉上我们是看不到的，只能看到一个平面。item-middle我设置了5个不同背景颜色的子项，结果如下：现在看起来好像很普通，也确实是。然而，见证奇迹的时刻到了。这时候我们给父元素.g-container设置一个很小的视角，比如设置一个视角：4px，看看效果：.g-container{position:relative;+perspective:4px;}//...其余样式保持不变。这时候画风突然一变，整个效果变成了这样：由于透视的作用，原本的平面效果变成了3D效果。接下来我们用上面准备的星空图片来替换上面的背景色，全部替换成同一张图片。神奇的事情发生了：因为设置的perspective很小，而每一项的transform:translateZ(50px)设置的比较大，所以图片在视觉上被拉伸的很厉害。但是整体就是占满了整个屏幕。接下来，我们只需要移动视角，给父元素添加动画，通过控制父元素的translateZ()改变：.g-container{position:relative;perspective:4px;perspective-origin:50%50%;}.g-group{position:absolute;//...一些定位高宽代码transform-style:preserve-3d;+animation:move8sinfinitelinear;}@keyframesmove{0%{transform:translateZ(-50px)rotate(0deg);}100%{transform:translateZ(50px)rotate(0deg);}}看，神奇奇妙的星空穿梭效果出来了。开头和结尾都有很大的问题。当然，这对我们来说并不难，我们可以：通过叠加两组相同的效果，一组通过负的animation-delay相对于另一组提前，这样就可以将两组动画连接起来（当一个一组结束，另一组还在移动）然后通过透明度的变化，隐藏脸上突然出现item-middle飞的感觉最后可以通过parent的filterhue-rotate来控制图片的颜色变化元素。我们尝试修改HTML结构如下：

修改后的核心CSS如下：.g-容器{视角：4px；位置：相对；//hue-rotate改变动画，可以改变图片的颜色animation:hueRotate21sinfinitelinear;}.g-group{transform-style:preserve-3d;animation:move12sinfinitelinear;}//设置负的animation-delay，让第二个group动画提前执行。g-group:nth-child(2){animation:move12sinfinitelinear;animation-delay:-6s;}.item{background:url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);background-size:cover;opacity:1;//子元素透明度变化，减少动画连接的突兀感animation:fade12sinfinitelinear;animation-delay:0;}.g-group:nth-child(2).item{animation-delay:-6s;}@keyframesmove{0%{transform:translateZ(-500px)rotate(0deg);}100%{transform:translateZ(500px)rotate(0deg);}}@keyframesfade{0%{opacity:0;}25%,60%{opacity:1;}100%{opacity:0;}}@keyframeshueRotate{0%{filter:hue-rotate(0);}100%{filter:hue-rotate(360deg);}}最终完成的完整效果如下，星空穿梭的效果，整个动画就是首尾相接，可以无限延续下去，几乎没有破绽，很好：上面的完整代码，大家可以猛戳这里：CSS灵感——3D宇宙时空穿梭效果[3]这样，我们就基本有了还原了上面我们看到的网易UU加速器首页的动画背景。更进一步，我不想使用一张图片。当然这里还是会有读者吐槽，你这里不是也用了个图片资源吗？没有那个星空图能行吗？我懒得找这张图了。当然，CSSYYDS。这里我们尝试使用box-shadow来代替实际的星图，也是在一个div标签中实现的，借助SASS循环函数：

@functionrandomNum($max,$min:0,$u:1){@return($min+random($max))*$u;}@functionrandomColor(){@returnrgb(randomNum(255),randomNum(255),randomNum(255));}@functionshadowSet($maxWidth,$maxHeight,$count){$shadow:0000randomColor();@for$ifrom0through$count{$x:#{random(10000)/10000*$maxWidth};$y:#{random(10000)/10000*$maxHeight};$shadow:$shadow,#{$x}#{$y}0#{random(5)}pxrandomColor();}@return$shadow;}body{background:#000;}div{width:1px;height:1px;border-radius:50%;box-shadow:shadowSet(100vw,100vh,500);}这里我们用SASS封装了一个函数，利用了多个box-shadows的特点,传入size的高宽范围内,生成传入的点数.这样，我们就可以得到这样一张图来代替实际的星空图：我们把实际的星空图替换成上面的图，主要是替换.item类，只列出修改的部分：//OriginalCSS,使用星图.item{position:absolute;width:100%;height:100%;background:url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);background-size:cover;animation:fade12sinfinitelinear;}//修改CSS代码position:absolute;top:0;left:0;right:0;bottom:0;width:1px;height:1px;border-radius:50%;box-shadow:shadowSet(100vw,100vh,500);}在这样，我们就实现了这样一个效果，使用纯CSS实现了上面的效果，不需要额外的资源：CodePenDemo--PureCSSGalaxyShuttle2[4]通过调整动画时间，透视值，translateZ的变化距离（)的每一组元素，你可以得到各种不同的外观和手感和效果，有兴趣的读者可以根据我上面给出的DEMO自行尝试。最后，本文到此结束，希望本文对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，文笔有限，知识匮乏，如有不妥之处，敬请谅解！这篇文章，请告诉我。参考资料[1]网易UU加速器：https://uu.163.com/[2]神奇的CSS3D动画|只用CSS能做出多神奇的动画？：https://github.com/chokcoco/iCSS/issues/132[3]CSS灵感——3D宇宙时空穿梭效果：https://csscoco.com/inspiration/#/./3d/3d-css-galaxy-shuttle[4]CodePen演示--纯CSSGalaxyShuttle2:https://codepen.io/Chokcoco/pen/NWvYOqW

上一篇：iOS开发中两个常见问题的处理

下一篇：你最喜欢哪个Linux发行版？

3D穿梭效应？周末在家使用CSS轻松搞定相关文章

最新推荐

猜你喜欢