CSS完成富有创意的页面加载（loading）动画效果
时间：2024/1/22作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。小伙伴们在浏览网站时有没有遇到页面“loading中，请稍后”的情况，作为前端工程师，你会用CSS制作页面加载（loading）动画效果吗？这篇文章给大家分享一个富有创意的页面加载（loading）动画代码，有一定的参考价值，感兴趣的朋友可以看看。
制作一个富有创意的页面加载（loading）动画需要用到很多CSS中的属性，比如：animation动画，transform属性等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 CSS视频教程。
实例描述：用div制作一个富有创意的正方形loading页面效果，在加载过程中，正方形沿Y轴翻转，又沿X轴翻转，具体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } </style> </head> <body> <div class="spinner"></div> </body> </html>效果如图所示：
以上给大家分享了一个富有创意的正方形加载（loading）页面效果代码，比较简单，初学者可以自己动手实践，看看能不能实现页面加载的动画效果，希望这篇文章对你有所帮助！
【相关教程推荐】
1. CSS3视频教程
2. HTML视频教程
3. bootstrap教程以上就是CSS实现富有创意的页面加载（loading）动画效果的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：CSS完成富有创意的页面加载（loading）动画效果