[分享]css3动画页面加载执行

发布于 2024-11-11 14:01:33

随着互联网的发展，越来越多的人开始认识到网页设计的重要性。而CSS3的动画效果，作为网页设计的关键技术之一，也日益受到广泛的关注。CSS3动画可以让页面更加生动、时尚、跳跃，页面加载时动画的执行更是让...

随着互联网的发展，越来越多的人开始认识到网页设计的重要性。而CSS3的动画效果，作为网页设计的关键技术之一，也日益受到广泛的关注。

CSS3动画可以让页面更加生动、时尚、跳跃，页面加载时动画的执行更是让人感觉更有活力和强烈得到了迎接。我们可以通过一个简单的CSS3动画来实现页面加载时动画的执行。

<!DOCTYPE html>
<html>
 <head>
  <title>页面加载动画</title>
  <style>
   body {
    background-color: #f8f8f8;
   }
   .loader {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-right-color: #777;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
   }
   @keyframes rotate {
    from {
     transform: rotate(0deg);
    }
    to {
     transform: rotate(360deg);
    }
   }
  </style>
 </head>
 <body>
  <div class="loader"></div>
 </body>
</html>

在上述代码中，我们首先定义了一个背景色为#f8f8f8的body。之后，定义了一个名为.loader的div元素，并定义它的宽、高、边框、圆角和动画效果等样式。其中，动画样式使用了名为rotate的关键帧。

接下来，在HTML中添加了.loader元素，以便页面中可以看到加载动画的效果。

最后，我们将以上代码保存成一个html文件，并使用浏览器打开该文件，就可以看到页面加载时动画效果的执行了。

css 教程