其他
【每日一练】55—CSS实现3D文本动画效果
写在前面
今天这个小练习，是之前在视频号上分享过的，今天我们把源码分享给大家，有兴趣的小伙可以去看一下练习一下，现在我们一起来看下它的最终效果：
<!DOCTYPE html><html><head><title>【每日一练】55—CSS实现3D文本动画效果</title><link rel="stylesheet" type="text/css" href="style.css"></head><body> <div class="container"> <div class="box"> <span style="--i:1;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:2;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:3;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:4;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:5;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:6;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:7;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:8;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:9;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:10;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:11;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:12;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:13;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:14;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:15;"><i>CSS</i> Is <i>A</i>wesome</span> <span style="--i:16;"><i>CSS</i> Is <i>A</i>wesome</span> </div> </div></body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins';}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222; overflow: hidden;}.container{ display: flex; justify-content: center; align-items: center;}.container .box{ transform-style: preserve-3d; animation: animate 15s linear infinite;}@keyframes animate{ 0% { transform: perspective(1000px) rotateX(0deg) rotate(25deg); } 100% { transform: perspective(1000px) rotateX(360deg) rotate(25deg); }}.container .box span{ position: absolute; color: #fff; font-size: 3.5em; white-space: nowrap; text-transform: uppercase; font-weight: 900; padding: 0 10px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.5), transparent); line-height: 0.76em; transform-style: preserve-3d; text-shadow: 0 5px 15px rgba(0,0,0,0.25); transform: translate(-50%,-50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(106px);}.container .box span i:nth-child(1){ font-style: initial; color: #ff246f;}.container .box span i:nth-child(2){ font-style: initial; color: #12b5ff;}写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号