网站加载中loading..样式四代码介绍

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..样式五代码介绍

网站加载中loading..样式三代码介绍

网站加载中loading..样式二代码介绍

网站加载中样式loading..代码介绍

如何利用svg做一个有趣的loading动画加载

标签： css网站加载, loading

上面是“网站加载中loading..样式四代码介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13323.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！