话不多说,直接上代码,需要配合js才能实现在每次打开页面加载完成前显示加载动画,页面加载完成后动画自动隐藏
html部分:
<div class="layuimini-loader"> <div class="layuimini-loader-inner"></div> </div>
css部分:
.layuimini-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 999999; } .layuimini-loader .layuimini-loader-inner { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1E9FFF; animation: spin 2s linear infinite; } .layuimini-loader .layuimini-loader-inner:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1E9FFF; animation: spin 3s linear infinite; } .layuimini-loader .layuimini-loader-inner:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1E9FFF; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }
好了,就是这么简单,你学废了吗?
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://www.htmlbk.com/web/613.html
温馨提示:该文档最后一次修改时间为2022-07-19 12:00:28,请注意相关的内容是否还可用!