“MediaWiki:Animation.css”的版本间的差异

2019年9月4日 (三) 23:45的最新版本

/*======================= DIY动画 ==========================*/
/* 弹幕 */
@keyframes danmu {
    0%   { text-indent: 120% }
    100% { text-indent: -80% }
}
/* 首页加载 */
@keyframes mainpage-load {
    0%   {opacity:0.0;height:20px}
    70%  {opacity:1.0;height:20px;}
    100% {opacity:0.0;height:0px;}
}
@keyframes mainpage-content {
    0%   {padding-top:20%;opacity:0.0}
    100% {padding-top:0%;opacity:1.0}
}
@keyframes mainpage-load-div {
    0%   {background-color:red;height:10px;width:1%}
    5%   {background-color:red;height:10px;width:10%}
    20%  {background-color:red;height:10px;width:15%}
    30%  {background-color:red;height:10px;width:30%}
    50%  {background-color:orange;height:10px;width:50%}
    60%  {background-color:orange;height:10px;width:67%}
    80%  {background-color:orange;height:10px;width:89%}
    90%  {background-color:green;height:10px;width:100%}
    95%  {background-color:green;height:10px;width:100%}
    99%  {background-color:green;height:10px;width:100%}
    100% {diplay:none;height:0px}
}
/*================slide===================*/
@keyframes slidein {
  from {
    padding-left: 100%;
    width: 300%;
  }
 
  to {
    padding-left: 0%;
    width: 100%;
  }
}
.slide {/*slide*/
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
}
.quickslide {/*更快的slide*/
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
}

/** 纯CSS加载动画(Template:Loader) **/
.loader {
    position: relative;
    left: calc(50% - 4px);
    top: 50%;
}
.loader span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: loader 1.5s  infinite ease-in-out;
}  
.loader span:nth-child(2){
    left:11px;
    animation-delay: .2s;  
}
.loader span:nth-child(3){
    left:22px;
    animation-delay: .4s;
}
.loader span:nth-child(4){
    left:33px;
    animation-delay: .6s;
}
.loader span:nth-child(5){
    left:44px;
    animation-delay: .8s;
}
@keyframes loader {
    0% {height:5px;transform:translateY(0px);background:#587ca3;}
    25% {height:30px;transform:translateY(15px);background:#1da1f2;}
    50% {height:5px;transform:translateY(0px);background:#587ca3;}
    100% {height:5px;transform:translateY(0px);background:#587ca3;}
}