您好,登录后才能下订单哦!
用html和CSS实现页面加载loading动画效果的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
实现页面加载loading动画效果需要用到很多CSS中的属性,比如:animation动画,keyframes,border-radius圆角,border属性等等,如果有小伙伴不知道这些属性的,可以参考亿速云的相关手册:CSS手册 ,希望对你有所帮助。
以下是如何用HTML和CSS3实现页面加载(loading)动画效果实例详解:
HTML部分
创建一个div用于显示加载动画,并给div一个class类名,便于对其进行样式设置,(如果样式不多也可以在标签内设置样式)具体代码如下:
<body> <p style="font-size: 20px;">CSS加载样式</p> <div class="load"></div> </body>
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动画效果的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。