首页 / CSS / CSS实现富有创意的页面加载（loading）动画效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现富有创意的页面加载（loading）动画效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1894字，纯文字阅读大概需要3分钟。

内容图文

小伙伴们在浏览网站时有没有遇到页面“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>

效果如图所示：

CSS实现富有创意的页面加载（loading）动画效果 - 文章图片

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

【相关教程推荐】

1. CSS3视频教程
2. HTML视频教程
3. bootstrap教程

以上就是CSS实现富有创意的页面加载（loading）动画效果的详细内容。

内容总结

以上是互联网集市为您收集整理的CSS实现富有创意的页面加载（loading）动画效果全部内容，希望文章能够帮你解决CSS实现富有创意的页面加载（loading）动画效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/417396.html

来源：【匿名】