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

438 ℃

css代码：

body {
  background:#1b1d1f;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:0;
  margin:0
}
.loader-wrapper {
  width:148px;
  height:100px;
  position:absolute
}
.loader {
  width:148px;
  height:100px;
  top:0;
  left:0;
  position:absolute
}
.loader:after {
  content:"";
  top:auto;
  position:absolute;
  display:block;
  animation:shadow 1.2s infinite linear;
  -moz-animation:shadow 1.2s infinite linear;
  bottom:0em;
  left:0;
  height:.25em;
  width:1em;
  border-radius:50%;
  background-color:rgba(100,100,100,.5);
  opacity:0.3
}
.roller,.roller:last-child {
  width:70px;
  height:70px;
  position:absolute;
  top:0;
  left:0;
  -webkit-animation:rollercoaster 1.2s infinite linear;
  -webkit-transform:rotate(135deg);
  -moz-animation:rollercoaster 1.2s infinite linear;
  -moz-transform:rotate(135deg);
  animation:rollercoaster 1.2s infinite linear;
  transform:rotate(135deg)
}
.roller:last-child {
  left:auto;
  right:0;
  -webkit-transform:rotate(-45deg);
  -webkit-animation:rollercoaster2 1.2s infinite linear;
  -moz-transform:rotate(-45deg);
  -moz-animation:rollercoaster2 1.2s infinite linear;
  transform:rotate(-45deg);
  animation:rollercoaster2 1.2s infinite linear
}
.roller:before,.roller:last-child:before {
  content:"";
  display:block;
  width:15px;
  height:15px;
  background:#f1404b;
  border-radius:50%
}
.io-black-mode .loader:after {
  background-color:rgba(130,130,130,.5)
}
@-webkit-keyframes rollercoaster {
  0% {
  -webkit-transform:rotate(135deg)
}
8% {
  -webkit-transform:rotate(240deg)
}
20% {
  -webkit-transform:rotate(300deg)
}
40% {
  -webkit-transform:rotate(380deg)
}
45% {
  -webkit-transform:rotate(440deg)
}
50% {
  -webkit-transform:rotate(495deg);
  opacity:1
}
50.1% {
  -webkit-transform:rotate(495deg);
  opacity:0
}
100% {
  -webkit-transform:rotate(495deg);
  opacity:0
}
}@-webkit-keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  -webkit-transform:rotate(-45deg)
}
58% {
  -webkit-transform:rotate(-160deg)
}
70% {
  -webkit-transform:rotate(-240deg)
}
80% {
  -webkit-transform:rotate(-300deg)
}
90% {
  -webkit-transform:rotate(-340deg)
}
100% {
  -webkit-transform:rotate(-405deg)
}
}@-webkit-keyframes shadow {
  0% {
  opacity:.3;
  -webkit-transform:translateX(65px) scale(0.5,0.5)
}
8% {
  -webkit-transform:translateX(30px) scale(2,2)
}
13% {
  -webkit-transform:translateX(0px) scale(1.3,1.3)
}
30% {
  -webkit-transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  -webkit-transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  -webkit-transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  -webkit-transform:translateX(145px) scale(1.2,1.2)
}
80% {
  -webkit-transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  -webkit-transform:translateX(80px) scale(0.8,0.8)
}
100% {
  -webkit-transform:translateX(60px);
  opacity:0.3
}
}@-moz-keyframes rollercoaster {
  0% {
  -moz-transform:rotate(135deg)
}
8% {
  -moz-transform:rotate(240deg)
}
20% {
  -moz-transform:rotate(300deg)
}
40% {
  -moz-transform:rotate(380deg)
}
45% {
  -moz-transform:rotate(440deg)
}
50% {
  -moz-transform:rotate(495deg);
  opacity:1
}
50.1% {
  -moz-transform:rotate(495deg);
  opacity:0
}
100% {
  -moz-transform:rotate(495deg);
  opacity:0
}
}@-moz-keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  -moz-transform:rotate(-45deg)
}
58% {
  -moz-transform:rotate(-160deg)
}
70% {
  -moz-transform:rotate(-240deg)
}
80% {
  -moz-transform:rotate(-300deg)
}
90% {
  -moz-transform:rotate(-340deg)
}
100% {
  -moz-transform:rotate(-405deg)
}
}@-moz-keyframes shadow {
  0% {
  opacity:.3;
  -moz-transform:translateX(65px) scale(0.5,0.5)
}
8% {
  -moz-transform:translateX(30px) scale(2,2)
}
13% {
  -moz-transform:translateX(0px) scale(1.3,1.3)
}
30% {
  -moz-transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  -moz-transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  -moz-transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  -moz-transform:translateX(145px) scale(1.2,1.2)
}
80% {
  -moz-transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  -moz-transform:translateX(80px) scale(0.8,0.8)
}
100% {
  -moz-transform:translateX(60px);
  opacity:0.3
}
}@keyframes rollercoaster {
  0% {
  transform:rotate(135deg)
}
8% {
  transform:rotate(240deg)
}
20% {
  transform:rotate(300deg)
}
40% {
  transform:rotate(380deg)
}
45% {
  transform:rotate(440deg)
}
50% {
  transform:rotate(495deg);
  opacity:1
}
50.1% {
  transform:rotate(495deg);
  opacity:0
}
100% {
  transform:rotate(495deg);
  opacity:0
}
}@keyframes rollercoaster2 {
  0% {
  opacity:0
}
49.9% {
  opacity:0
}
50% {
  opacity:1;
  transform:rotate(-45deg)
}
58% {
  transform:rotate(-160deg)
}
70% {
  transform:rotate(-240deg)
}
80% {
  transform:rotate(-300deg)
}
90% {
  transform:rotate(-340deg)
}
100% {
  transform:rotate(-405deg)
}
}@keyframes shadow {
  0% {
  opacity:.3;
  transform:translateX(65px) scale(0.5,0.5)
}
8% {
  transform:translateX(30px) scale(2,2)
}
13% {
  transform:translateX(0px) scale(1.3,1.3)
}
30% {
  transform:translateX(-15px) scale(0.5,0.5);
  opacity:0.1
}
50% {
  transform:translateX(60px) scale(1.2,1.2);
  opacity:0.3
}
60% {
  transform:translateX(130px) scale(2,2);
  opacity:0.05
}
65% {
  transform:translateX(145px) scale(1.2,1.2)
}
80% {
  transform:translateX(120px) scale(0.5,0.5);
  opacity:0.1
}
90% {
  transform:translateX(80px) scale(0.8,0.8)
}
100% {
  transform:translateX(60px);
  opacity:0.3
}
}#loader2:after {
  -webkit-animation-delay:0.15s;
  animation-delay:0.15s
}
#loader2 .roller {
  -webkit-animation-delay:0.15s;
  animation-delay:0.15s
}
#loader3:after {
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s
}
#loader3 .roller {
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s
}

html代码：

<div id="loading">
  <div class="loader-wrapper">
    <div class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
    <div id="loader2" class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
    <div id="loader3" class="loader">
        <div class="roller"></div>
        <div class="roller"></div>
    </div>
  </div>
</div>

点击查看效果

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

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

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

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

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

标签： css网站加载, loading

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

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

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

js如何实现打印除法和取余功能
flex布局：如何将元素智能地固定在底部
自动打字效果(惊喜在后面)
如何利用js检测用户滚动页面的位置
javascript如何实现点击展开和关闭效果
Copyright©2019-2024 前端入门建站教程 浙ICP备2021039069号-2