loading窗口动画 web_用html和CSS实现页面加载loading动画效果的方法

用html和CSS实现页面加载loading动画效果的方法

发布时间：2020-08-31 11:30:52

来源：亿速云

阅读：86

作者：小新

用html和CSS实现页面加载loading动画效果的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

实现页面加载loading动画效果需要用到很多CSS中的属性，比如：animation动画，keyframes，border-radius圆角，border属性等等，如果有小伙伴不知道这些属性的，可以参考亿速云的相关手册：CSS手册 ，希望对你有所帮助。

以下是如何用HTML和CSS3实现页面加载(loading)动画效果实例详解：

HTML部分

创建一个div用于显示加载动画，并给div一个class类名，便于对其进行样式设置，(如果样式不多也可以在标签内设置样式)具体代码如下：

CSS加载样式

CSS部分

页面的基本框架已经有了，现在还需要用CSS对其进行样式设置，设置div的长和高为120px，设置border-radius属性值为50%，将其变为圆形，用 border-top和border-bottom设置上下两个弧形，便于后面的动画设置。

最后，为了使其旋转起来，需要用animation和@keyframes属性，具体代码如下：

注意：使用animation和@keyframes动画时，注意浏览器的兼容性。(比如加前缀 -webkit- 和 -ms- ).load {

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top: 16px solid blue;

border-bottom: 16px solid blue;

width: 120px;

height: 120px;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

}

@-webkit-keyframes spin {

0% {-webkit-transform: rotate(0deg);}

100% {-webkit-transform: rotate(360deg);}

}

@keyframes spin {

0% {transform: rotate(0deg);}

100% {transform: rotate(360deg);}

}

loading效果效果图：

感谢各位的阅读！看完上述内容，你们对用html和CSS实现页面加载loading动画效果的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。