制作一个富有创意的页面加载（loading）动画需要用到很多css中的属性，比如：animation动画，transform属性等等，如有不清楚的小伙伴可以参考的相关文章，或者访问 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）动画效果的详细内容。