• Hiệu ứng loading đẹp khi chuyển trang cho blogger

  • ITtoday.vn - Hôm nay chúng tôi đưa ra cho các bạn đoạn code CSS chèn để tạo hiệu ứng loading đẹp mắt, mới lạ.

  • Sunday, 26 July 2015, 05:06:23 PM
  • Hiệu ứng loading đẹp khi chuyển trang cho blogger
  • Vẫn là các bước cơ bản ban đầu đăng nhập vào Blogger rồi tìm đến chỉnh sửa HTML

    Để có được hiệu ứng các bạn chèn theo sau:

    - Bạn thêm code sau vào trước thẻ ]]> trong template

    #loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
    .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
    .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
    @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
    @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
    @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
    @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

    Chèn đoạn code bên dưới trước thẻ đóng

     

     

    
    	
     
     

    Chúc các bạn thành công!