教学模式

​x
 
body{
  background:#8fe6d5;
}
.wrapper{
  width:50px;
  height:50px;
  position:fixed;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
  
}
#preloader{
  width:50px;
  height:50px;
  border:2px solid white;
  border-radius:0px;
  -webkit-animation: preloader 4.5s infinite linear;
    -moz-animation: preloader 4.5s infinite linear;
    -ms-animation: preloader 4.5s infinite linear;
    animation: preloader 4.5s infinite linear;
}
#preloader:after{
  content:'';
  width:14px;
  height:14px;
  background:white;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-7px;
  margin-top:-7px;
  border-radius:20px;
    -webkit-animation: preloader_after 4.5s infinite linear;
  -moz-animation: preloader_after 4.5s infinite linear;
  -ms-animation: preloader_after 4.5s infinite linear;
  animation: preloader_after 4.5s infinite linear;
  -webkit-transform:scale(0);
}
​
@-webkit-keyframes preloader {
0%{ -webkit-transform:scale(0)}
10%{ -webkit-transform:scale(1.3)}
12%{ -webkit-transform:scale(1)}
15%{ -webkit-transform:scale(1.3)}
17%{ -webkit-transform:scale(1)}
25%{ -webkit-transform:scale(1)}
40%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -webkit-transform:scale(1) rotate(180deg); border-radius:0px;}
44%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
  46%{ -webkit-transform:scale(1) rotate(180deg); border-radius:0px;}
    48%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
      50%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
  95%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
        100%{ -webkit-transform:scale(0) rotate(180deg); border-radius:100px;}
}
​
@-moz-keyframes preloader {
0%{ -moz-transform:scale(0)}
10%{ -moz-transform:scale(1.3)}
12%{ -moz-transform:scale(1)}
15%{ -moz-transform:scale(1.3)}
17%{ -moz-transform:scale(1)}
25%{ -moz-transform:scale(1)}
40%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -moz-transform:scale(1) rotate(180deg); border-radius:0px;}
44%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
  46%{ -moz-transform:scale(1) rotate(180deg); border-radius:0px;}
    48%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
      50%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
  95%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
        100%{ -moz-transform:scale(0) rotate(180deg); border-radius:100px;}
}
​
@-ms-keyframes preloader {
0%{ -ms-transform:scale(0)}
10%{ -ms-transform:scale(1.3)}
12%{ -ms-transform:scale(1)}
15%{ -ms-transform:scale(1.3)}
17%{ -ms-transform:scale(1)}
25%{ -ms-transform:scale(1)}
40%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ -ms-transform:scale(1) rotate(180deg); border-radius:0px;}
44%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
  46%{ -ms-transform:scale(1) rotate(180deg); border-radius:0px;}
    48%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
      50%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
  95%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
        100%{ -ms-transform:scale(0) rotate(180deg); border-radius:100px;}
}
​
@keyframes preloader {
0%{ transform:scale(0)}
10%{ transform:scale(1.3)}
12%{ transform:scale(1)}
15%{ transform:scale(1.3)}
17%{ transform:scale(1)}
25%{ transform:scale(1)}
40%{ transform:scale(1) rotate(180deg); border-radius:20px;}
42%{ transform:scale(1) rotate(180deg); border-radius:0px;}
44%{ transform:scale(1) rotate(180deg); border-radius:20px;}
  46%{ transform:scale(1) rotate(180deg); border-radius:0px;}
    48%{ transform:scale(1) rotate(180deg); border-radius:20px;}
      50%{ transform:scale(1) rotate(180deg); border-radius:20px;}
  95%{ transform:scale(1) rotate(180deg); border-radius:20px;}
        100%{ transform:scale(0) rotate(180deg); border-radius:100px;}
}
  
  
  
  
  @-webkit-keyframes preloader_after {
0%{ -webkit-transform:scale(0); }
45%{ -webkit-transform:scale(0); }
50%{ -webkit-transform:scale(1);}
55%{ -webkit-transform:scale(1) translateY(-20px) translateX(-14px);}
 60%{ -webkit-transform:scale(1) translateY(20px) translateX(14px);}
    65%{ -webkit-transform:scale(1) translateY(-20px) translateX(14px);}
 70%{ -webkit-transform:scale(1) translateY(20px) translateX(-14px);}
        75%{ -webkit-transform:scale(1) translateY(-20px) translateX(14px);}
 80%{ -webkit-transform:scale(1) translateY(20px) translateX(-14px);}
     85%{ -webkit-transform:scale(1) translateY(-20px) translateX(-14px);}
 90%{ -webkit-transform:scale(1) translateY(0px) translateX(0px);}
95%{ -webkit-transform:scale(1.5);}
100%{ -webkit-transform:scale(0);}
  }
​
​
  @-moz-keyframes preloader_after {
0%{ -moz-transform:scale(0); }
45%{ -moz-transform:scale(0); }
50%{ -moz-transform:scale(1);}
55%{ -moz-transform:scale(1) translateY(-20px) translateX(-14px);}
 60%{ -moz-transform:scale(1) translateY(20px) translateX(14px);}
    65%{ -moz-transform:scale(1) translateY(-20px) translateX(14px);}
 70%{ -moz-transform:scale(1) translateY(20px) translateX(-14px);}
        75%{ -moz-transform:scale(1) translateY(-20px) translateX(14px);}
 80%{ -moz-transform:scale(1) translateY(20px) translateX(-14px);}
     85%{ -moz-transform:scale(1) translateY(-20px) translateX(-14px);}
 90%{ -moz-transform:scale(1) translateY(0px) translateX(0px);}
95%{ -moz-transform:scale(1.5);}
100%{ -moz-transform:scale(0);}
  }
​
  @-ms-keyframes preloader_after {
0%{ -ms-transform:scale(0); }
45%{ -ms-transform:scale(0); }
50%{ -ms-transform:scale(1);}
55%{ -ms-transform:scale(1) translateY(-20px) translateX(-14px);}
 60%{ -ms-transform:scale(1) translateY(20px) translateX(14px);}
    65%{ -ms-transform:scale(1) translateY(-20px) translateX(14px);}
 70%{ -ms-transform:scale(1) translateY(20px) translateX(-14px);}
        75%{ -ms-transform:scale(1) translateY(-20px) translateX(14px);}
 80%{ -ms-transform:scale(1) translateY(20px) translateX(-14px);}
     85%{ -ms-transform:scale(1) translateY(-20px) translateX(-14px);}
 90%{ -ms-transform:scale(1) translateY(0px) translateX(0px);}
95%{ -ms-transform:scale(1.5);}
100%{ -ms-transform:scale(0);}
  }
​
  @keyframes preloader_after {
0%{ transform:scale(0); }
45%{ transform:scale(0); }
50%{ transform:scale(1);}
55%{ transform:scale(1) translateY(-20px) translateX(-14px);}
 60%{ transform:scale(1) translateY(20px) translateX(14px);}
    65%{ transform:scale(1) translateY(-20px) translateX(14px);}
 70%{ transform:scale(1) translateY(20px) translateX(-14px);}
        75%{ transform:scale(1) translateY(-20px) translateX(14px);}
 80%{ transform:scale(1) translateY(20px) translateX(-14px);}
     85%{ transform:scale(1) translateY(-20px) translateX(-14px);}
 90%{ transform:scale(1) translateY(0px) translateX(0px);}
95%{ transform:scale(1.5);}
100%{ transform:scale(0);}
  }
​
JSDM

HTML

CSS

JS

文件管理点击文件查看URL

图片

CSS

JavaScript

其他
