首页 文章详情

【每日一练】55—CSS实现3D文本动画效果

web前端开发 | 83 2022-09-06 09:01 0 0 0
UniSMS (合一短信)

f55fdc2af0f69bb41ca065a96963fd01.webp


写在前面

今天这个小练习,是之前在视频号上分享过的,今天我们把源码分享给大家,有兴趣的小伙可以去看一下练习一下,现在我们一起来看下它的最终效果:

另外,如果还没有关注我们视频号的小伙伴,请记得关注我们的视频号,后面我们会在视频号上分享更多资源。 下面我们一起来看一下它的源码。 HTML代码:
      
        
          <!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>
        
      
      
        
          
CSS代码:
      
        *
      
      
        {
      
      
          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;
      
      
        }
      
    

写在最后

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

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

学习更多技能

请点击下方公众号

b48b64093f14ac068d34b863a1d0d299.webp

141fb7fdb62fb70cfe8108f439c800bd.webp

f0b03167770a533c7cb16e2a0833b92d.webp

good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter