之前的文章《手把手教你使用css给文字添加火焰效果（代码详解）》中，给大家介绍了怎么使用css给文字添加火焰效果。下面本篇文章给大家介绍怎么使用css3给文字添加动画效果，我们一起看看怎么做。
在这类网站中能看到，无论是文字还是图片，都随着规定时间的而变化。css3的主键强大原理很简单，主要用到css中animation属性，文字实现动画效果给大家看看。
代码步骤
1、首先使用html框架。
创建新一个文档，写代码先用
<div class="animate box"></div>
2、目前大体的框架已经写好，
css3实现简单的文字动画效果
ok,html代码大功告成
立即学习“前端免费学习笔记（深入）”；
3、css3实现最核心的部分：CSS设置动画及字体样式。
animate属性使用将动画与div元素绑定，以像素计。当为元素定义animate属性时，其子元素会获得透视效果，而不是元素本身。下面给大家怎么写代码，首先在head标签之间加入这串代码然后在style标签中输入文本的字体大小、外边距、布局（设置元素上宽度和高度）代码示例。
.animate { font-size: 40px; margin: 100px 0 0;} .animate span { display: inline-block;}
4、box盒子
box盒子模型指是：在网页上直观地布局元素，每个框都有一个内容区域以及可选的周围边距，边距和边框。下面给大家怎么写代码，以上head标签之间加入串代码的方法一样，style标签中输入文本的颜色、不透明、偏移，代码示例。
.box span { color: #fff; opacity: 0; transform: translate(-150px, 0) scale(.5); animation: leftRight 1s forwards;}
5、把盒子animation添加@keyframes ，因为这是div元素匀速移动，代码示例。
@keyframes leftRight { 40% { transform: translate(30px, 0) scale(.7); opacity: 1; color: #000; } 60% { color: #fff; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; }
ok,css大功告成
【完】
推荐学习：CSS3视频教程
以上就是手把手教你怎么使用css3给文字添加动画效果（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621469.html
微信扫一扫 
支付宝扫一扫 
