Difference between revisions of "Template:Fudan-CHINA"

Line 5: Line 5:
 
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
</p>
 
</p>
 +
 
<script>
 
<script>
−
/*function load() {
 
−
      var a= setTimeout("loading.style.transition='opacity 0.3s'",0) 
 
−
      //设置透明度改变的过渡时间为0.3秒
 
−
      var b= setTimeout("loading.style.opacity=0",500)
 
−
      //0.5秒后加载动画开始变为透明
 
−
      var c= setTimeout("loading.style.display='none'",800)
 
−
      //当透明度为0的时候，隐藏掉它
 
−
}
 
  
−
$(".mediawiki").attr({ onload: "load()"}*/
 
−
 
 
</script>
 
</script>
  
 
<!--loading------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--loading------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<style>
+
<style>
−
 
+
−
 
+
−
canvas {
+
−
  bottom: 0;
+
−
  left: 0;
+
−
  margin: auto;
+
−
  position: absolute;
+
−
  right: 0;
+
−
  top: 0;
+
−
z-index: 9999;
+
−
}</style>
+
 
 
−
<div id="loading">
+
.chromeframe {
−
<div></div>
+
    margin: 0.2em 0;
 +
    background: #ccc;
 +
    color: #000;
 +
    padding: 0.2em 0;}
 +
#loader-wrapper {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index:999999;}
 +
#loader {
 +
    display: block;
 +
    position: relative;
 +
    left: 50%;
 +
    top: 50%;
 +
    width: 150px;
 +
    height: 150px;
 +
    margin: -75px 0 0 -75px;
 +
    border-radius: 50%;
 +
    border: 3px solid transparent;
 +
    /* COLOR 1 */
 +
    border-top-color: #FFF;
 +
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
    -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
    -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
    -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 +
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
 +
    z-index:1001;}
 +
#loader:before {
 +
        content: "";
 +
        position: absolute;
 +
        top: 5px;
 +
        left: 5px;
 +
        right: 5px;
 +
        bottom: 5px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        /* COLOR 2 */     
 +
        border-top-color: #FFF;
 +
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
        -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
        -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
        -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */             
 +
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
 +
#loader:after {
 +
        content: "";
 +
        position: absolute;
 +
        top: 15px;
 +
        left: 15px;
 +
        right: 15px;
 +
        bottom: 15px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        border-top-color: #FFF;
 +
        /* COLOR 3 */     
 +
        -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
        -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
        -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */       
 +
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
 +
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
  
−
<script>
 
−
var $ = {};
 
  
−
$.Particle = function( opt ) {
+
@-webkit-keyframes spin {
−
  this.radius = 7;
+
        0%{
−
  this.x = opt.x;
+
            -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
−
  this.y = opt.y;
+
            -ms-transform: rotate(0deg); /* IE 9 */
−
  this.angle = opt.angle;
+
            transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
−
  this.speed = opt.speed;
+
        }100%{
−
  this.accel = opt.accel;
+
            -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
−
  this.decay = 0.01;
+
            -ms-transform: rotate(360deg); /* IE 9 */
−
  this.life = 1;
+
            transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}
−
};
+
}
  
−
$.Particle.prototype.step = function( i ) {
+
@keyframes spin {
−
  this.speed += this.accel;
+
        0%{
−
  this.x += Math.cos( this.angle ) * this.speed;
+
            -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
−
  this.y += Math.sin( this.angle ) * this.speed;
+
            -ms-transform: rotate(0deg); /* IE 9 */
−
  this.angle += $.PI / 64;
+
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
−
  this.accel *= 1.01;
+
        }100%{
−
  this.life -= this.decay;
+
            -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
−
 
+
            -ms-transform: rotate(360deg);  /* IE 9 */
−
  if( this.life <= 0 ) {
+
            transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}
−
    $.particles.splice( i, 1 );
+
}
−
  }
+
−
};
+
  
−
$.Particle.prototype.draw = function( i ) {
 
−
  $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ( $.tick + ( this.life * 120 ) ) + ', 100%, 60%, ' + this.life + ')';
 
−
  $.ctx.beginPath();
 
−
  if( $.particles[ i - 1 ] ) {
 
−
    $.ctx.moveTo( this.x, this.y );
 
−
    $.ctx.lineTo( $.particles[ i - 1 ].x, $.particles[ i - 1 ].y );
 
−
  }
 
−
  $.ctx.stroke();
 
−
 
 
−
  $.ctx.beginPath();
 
−
  $.ctx.arc( this.x, this.y, Math.max( 0.001, this.life * this.radius ), 0, $.TWO_PI );
 
−
  $.ctx.fill();
 
−
 
 
−
  var size = Math.random() * 1.25;
 
−
  $.ctx.fillRect( ~~( this.x + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), ~~( this.y + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), size, size );
 
−
}
 
  
−
$.step = function() {
+
#loader-wrapper .loader-section {
−
  $.particles.push( new $.Particle({
+
        position: fixed;
−
    x: $.width / 2 + Math.cos( $.tick / 20 ) * $.min / 2,
+
        top: 0;
−
    y: $.height / 2 + Math.sin( $.tick / 20 ) * $.min / 2,
+
        width: 51%;
−
    angle: $.globalRotation + $.globalAngle,
+
        height: 100%;
−
    speed: 0,
+
        background: rgba(0,36,49,1); /* Old browsers */
−
    accel: 0.01
+
        z-index: 1000;
−
  }));
+
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
−
 
+
        -ms-transform: translateX(0);  /* IE 9 */
−
  $.particles.forEach( function( elem, index ) {
+
        transform: translateX(0); /* Firefox 16+, IE 10+, Opera */}
−
    elem.step( index );
+
#loader-wrapper .loader-section.section-left {left: 0;}
−
  });
+
#loader-wrapper .loader-section.section-right {right: 0;}
−
 
+
−
  $.globalRotation += $.PI / 6;
+
−
  $.globalAngle += $.PI / 6;
+
−
};
+
  
−
$.draw = function() {
+
/* Loaded */
−
  $.ctx.clearRect( 0, 0, $.width, $.height );
+
.loaded #loader-wrapper .loader-section.section-left {
−
 
+
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
−
  $.particles.forEach( function( elem, index ) {
+
            -ms-transform: translateX(-100%);  /* IE 9 */
−
    elem.draw( index );
+
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
−
  });
+
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
−
};
+
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
 +
.loaded #loader-wrapper .loader-section.section-right {
 +
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
 +
            -ms-transform: translateX(100%);  /* IE 9 */
 +
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
 +
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 +
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
 +
.loaded #loader {
 +
        opacity: 0;
 +
        -webkit-transition: all 0.3s ease-out; 
 +
                transition: all 0.3s ease-out;}
 +
.loaded #loader-wrapper {
 +
        visibility: hidden;
 +
        -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
 +
            -ms-transform: translateY(-100%);  /* IE 9 */
 +
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
 +
        -webkit-transition: all 0.3s 1s ease-out; 
 +
                transition: all 0.3s 1s ease-out;}
 +
/* JavaScript Turned Off */
 +
.no-js #loader-wrapper {display: none;}
 +
.no-js h1 {color: #222222;}
 +
#loader-wrapper .load_title {
 +
    font-family:'Open Sans';
 +
    color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
 +
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}
  
−
$.init = function() {
 
−
  $.canvas = document.createElement( 'canvas' );
 
−
  $.ctx = $.canvas.getContext( '2d' );
 
−
  $.width = 300;
 
−
  $.height = 300;
 
−
  $.canvas.width = $.width * window.devicePixelRatio;
 
−
  $.canvas.height = $.height * window.devicePixelRatio;
 
−
  $.canvas.style.width = $.width + 'px';
 
−
  $.canvas.style.height = $.height + 'px';
 
−
  $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
 
−
  $.min = $.width * 0.5;
 
−
  $.particles = [];
 
−
  $.globalAngle = 0;
 
−
  $.globalRotation = 0;
 
−
  $.tick = 0;
 
−
  $.PI = Math.PI;
 
−
  $.TWO_PI = $.PI * 2;
 
−
  $.ctx.globalCompositeOperation = 'lighter';
 
−
  document.body.appendChild( $.canvas );
 
−
  $.loop();
 
−
};
 
  
−
$.loop = function() {
+
</style>
−
  requestAnimationFrame( $.loop );
+
−
  $.step();
+
−
  $.draw();
+
−
  $.tick++;
+
−
};
+
  
−
$.init();</script>
+
<div id="loader-wrapper">
 +
    <div id="loader"></div>
 +
    <div class="loader-section section-left"></div>
 +
    <div class="loader-section section-right"></div>
 +
    <div class="load_title">LOADING<br><span>Fudan-CHINA</span></div>
 +
</div>
  
−
</div>
 
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
Line 154: Line 173:
 
</script>
 
</script>
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
−
+
<script type="text/javascript">       
 +
    // 等待所有加载
 +
   $(document).ready(function(){
 +
        $('body').addClass('loaded');
 +
        $('#loader-wrapper .load_title').remove();
 +
    });
 +
</script> 
  
 
 
Line 351: Line 376:
 
}
 
}
 
     });
 
     });
−
</script>
+
</script>
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
 +
 +
 +
 +
 +
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 
 
</html>
 
</html>

Revision as of 06:34, 21 September 2018

LOADING
Fudan-CHINA