欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-08 11:53:32
...
小伙伴们在浏览网站时有没有遇到页面“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)动画效果的详细内容,更多请关注其它相关文章!