时间:2021-07-01 10:21:17 帮助过:42人阅读
- html:
- <body>
- <p>火火火火</p>
- </body>
- css:
- <style>
- body{ font-size:120px; font-family:'微软雅黑'; background:#000; color:#fff;}
- @-webkit-keyframes test{
- 0%{
- text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
- }
- 30%{
- text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;
- }
- 60%{
- text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;
- }
- 100%{
- text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
- }
- }
- p{font-weight:bold; color:#fff;
- text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
- animation:1s test linear infinite;
- }
- </style>
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
让div宽度自适应教学
网页的效果图与DIV+CSS关系
网页中使用h标签的开发经验
以上就是Css3字体做出火焰效果的实现步骤的详细内容,更多请关注Gxl网其它相关文章!