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

写在前面

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

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

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

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—围绕地球旋转的文本动画效果相关推荐

openGL绘制带纹理太阳、地球、月亮，并且地球自转并且围绕太阳旋转。月亮自转也会围绕地球旋转
openGL系列文章目录前言使用openGL绘制太阳.地球.月亮,太阳自转,地球自转并且围绕太阳旋转.月亮自转也会围绕地球旋转,其实月亮也会围绕太阳旋转的. 一.效果还是有不满意的地方: 1.没 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
【每日一练】19—CSS 实现撕纸的效果
写在前面今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处,就是当我们替换图 ...
【每日一练】15—CSS实现好看的卡片效果
写在前面最近,在做一个新项目,考虑用Tailwind CSS来实现UI效果,这个新出来的CSS框架,很多人说,它是一个用了会上瘾的框架,虽然出来时间不长,但是他的火爆程度,直接向bootstrap靠 ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
CSS实现内容旋转向下移动的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容旋转向下移动的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文 ...
html头像在背景中间特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...
HTML代码 HTML代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: WebHek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...
纯css和html光芒特效,纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
html代码 html代码结构很简单,跟之前那篇文章使用的相同: 复制代码代码如下: webhek 最外面的div作为父元素,它的position是relative,有固定的高和宽度,有两个子元素:一 ...
旋转样式文本动画PR标题字幕模板MOGRT
这是一个动态且功能强大的旋转样式文本动画PR标题字幕模板,由4K分辨率的彩色标题组成,将帮助您轻松地为社交媒体内容开发视频!调整颜色并在文本中使用任何字体! 项目特点: 4K分辨率全色控件适用于任 ...

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

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

最新文章

热门文章