【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果

写在前面

关于CSS 3D的效果，我之前也分享过一些，在视频号上也有，当然，视频号上没有源码，有兴趣的小伙伴，可以跟着视频自己敲代码，当然，这些代码，我后面也会分享到我们的网站上，大家可以直接到网站上获取源码。

现在，我们先来看一下今天的这个CSS 3D文本效果：

因为是录屏效果，这个动画看起不是很流畅，大家可以直接把源码下载到本地，然后到浏览器里进行观赏，那个效果比这个截图要好很多。

下面，我们再一起来看一下源码。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果</title>
</head>
<body><div class="box"><div><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span><span style="--i:21;"></span><span style="--i:22;"></span><span style="--i:23;"></span><span style="--i:24;"></span></div></div>
</body>
</html>

CSS代码：

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}
body
{background: #333;overflow: hidden;min-height: 100vh;display: flex;justify-content: center;align-items: center;
}
.box
{position: relative;width: 100%;height: 350px;transform-style: preserve-3d;
}
.box div
{position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;animation: animate  24s linear infinite;
}
.box div span
{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;box-sizing: border-box;transform: rotateX(calc(var(--i) * 15deg));
}
.box div span:before
{content: 'CSS Only';position: absolute;width: 100%;color: #fffe;text-transform: uppercase;font-size: 8em;height: 100px;text-align: center;font-weight: 800;-webkit-text-stroke: 2px #000;text-shadow: 0 0 50px rgba(0,0,0,0.5);
}
.box div span:nth-child(3n+2)::before
{color: #e3f2fddd;
}
.box div span:nth-child(3n+3)::before
{color: #fce4ecdd;
}
@keyframes animate
{0%{transform: perspective(1000px) rotateX(0deg);}100%{transform: perspective(1000px) rotateX(360deg);}
}

写在最后

以上就是我今天跟你分享的【每日一练】的小项目练习，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

PS：这个是我们视频号上的一个3D效果，大家可以看一下，源码后面我们会分享在网站（网站我们目前在调整修改中）上，如果想看实现源码的话，可以自行关注一下。

学习更多技能

请点击下方公众号

【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果相关推荐

【每日一练】103—纯CSS实现的一款炫酷卡片效果
作者 | 杨小爱写在前面我们经常会在各大平台看到很多产品的卡片效果,以及一些个人单页网站上的个人资料介绍时,也会用到各种卡片效果来展示信息,这种卡片式的设计,可以帮助我们分门别类的归类各种信息,让 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助展示效果项目目录展示 html代码 css部分代码 * { ...
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...
我用 Python 写了一款炫酷音乐播放器，想听啥随便搜！
作者:Dragon少年版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/hhladminh ...
【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果: HTML代码如下: <!doctype html> <html lang="zh"> <head><meta charset= ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
Android 炫酷动画APP,21 款炫酷动画开源框架，照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站前言最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...

【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果

【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果相关推荐

最新文章

热门文章