网站加载中loading..样式四代码介绍 发布时间:2025/01/17 css代码: body { background:#1b1d1f; display:flex; justify-content:center; align-items:center; height:100vh; padding:0; margin:0 } .loader { width:250px; height:50px; line-height:50px; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:helvetica,arial,sans-serif; text-transform:uppercase; font-weight:900; color:#f1404b; letter-spacing:0.2em } .loader::before,.loader::after { content:""; display:block; width:15px; height:15px; background:#f1404b; position:absolute; animation:load .7s infinite alternate ease-in-out } .loader::before { top:0 } .loader::after { bottom:0 } @keyframes load { 0% { left:0; height:30px; width:15px } 50% { height:8px; width:40px } 100% { left:235px; height:30px; width:15px } } 复制代码 html代码: <div id="loading"> <div class="loader">Loading...</div> </div> 复制代码 点击查看效果 以上是编程学习网小编为您介绍的“网站加载中loading..样式四代码介绍”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。