php设置加载动画,CSS实现富有创意的页面加载（loading）动画效果

小伙伴们在浏览网站时有没有遇到页面“loading中，请稍后”的情况，作为前端工程师，你会用CSS制作页面加载(loading)动画效果吗？这篇文章给大家分享一个富有创意的页面加载(loading)动画代码，有一定的参考价值，感兴趣的朋友可以看看。

制作一个富有创意的页面加载(loading)动画需要用到很多CSS中的属性，比如：animation动画，transform属性等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 CSS视频教程。

实例描述：用div制作一个富有创意的正方形loading页面效果，在加载过程中，正方形沿Y轴翻转，又沿X轴翻转，具体代码如下：

.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);

}

}

效果如图所示：

以上给大家分享了一个富有创意的正方形加载(loading)页面效果代码，比较简单，初学者可以自己动手实践，看看能不能实现页面加载的动画效果，希望这篇文章对你有所帮助！

【相关教程推荐】