天天看点

【每日一练】48—围绕地球旋转的文本动画效果

【每日一练】48—围绕地球旋转的文本动画效果

写在前面

今天我们练习的这个案例是一个文本旋转的效果,这个效果,在浏览器里预览还是非常流畅的,因为我这边用GIF录屏软件直接录制的效果,不是很好。

文本旋转的不流畅,后来录制了一个,但是文件太大了,超过10M,公号后台不上传了,动画效果,就是文本围绕着地球不停的旋转,截图如下:

【每日一练】48—围绕地球旋转的文本动画效果

下面是具体代码实现过程。

HTML代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【每日一练】48—围绕地球旋转的文本动画效果</title>
  </head>
  <body>
    <section>
      <div class="earth"></div>
      <div class="circle" data-splitting>
        <span style="--i:0;">地</span>
        <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>
        <span style="--i:25;">自</span>
        <span style="--i:26;">己</span>
        <span style="--i:27;">的</span>
        <span style="--i:28;">妈</span>
        <span style="--i:29;">妈</span>
        <span style="--i:30;">。</span>
      </div>
    </section>
  </body>
</html>      

CSS代码:

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}
body
{
  background: url(bg.jpg);
  background-size: cover;
  overflow: hidden;
}
section
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
    transform-style: preserve-3d;
}
.circle
{
  animation: animate 10s linear infinite;
    transform-style: preserve-3d;
}
.circle span
{
    position: absolute;
    top: 0;
    left: 0;
    color: #35146f;
    padding: 5px 11px;
    font-size: 3em;
    background: #fff;
    transform-origin: center;
    transform-style: preserve-3d;
    border-top: 4px solid #35146f;
    border-bottom: 4px solid #35146f;
    transform: rotateY(calc(var(--i) * calc(360deg / 31))) translateZ(200px);
}
@keyframes animate
{
  0%
  {
    transform: perspective(1000px) rotateY(360deg) rotateX(15deg) translateY(-30px);
  }
  100%
  {
    transform: perspective(1000px) rotateY(0deg) rotateX(15deg) translateY(-30px);
  }
}
.earth
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
    background: url(image.jpg);
    background-size: cover;
    background-repeat: repeat-x;
    box-shadow: inset 0 0 20px rgba(0,0,0,1), 0 0 50px #4069ff;
    animation: animateEarth 15s linear infinite;
}
@keyframes animateEarth
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: -750px 0;
    }
}




.circle span:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translateZ(-5px);
}      

写在最后

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

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

【每日一练】48—围绕地球旋转的文本动画效果