「自学哈网」好看的纯css页面加载loading动画
也想出现在这里?
联系我们吧
话不多说,直接上代码,需要配合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); } }
好了,就是这么简单,你学废了吗?
本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」好看的纯css页面加载loading动画
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」好看的纯css页面加载loading动画
也想出现在这里?
联系我们吧