Code load trang bằng css

Announcements

0 Votes - 0 Average
5
4
3
2
1

Chế độ chủ đề

ngocvu1403 Offline
Phó giám đốc

Bài viết: 1,186

Chủ đề: 877

Tham gia: May 2011

Danh tiếng: 4

25-09-2014, 12:21 AM

Chào các bạn

Thông thường khi chúng ta mở một trang web thì phài chờ mốt thời gian để trang load xuông máy tính và lúc đó rất chán dù trang web đang chờ rất hấp dẫn.

Vì vậy hôm nay mình chia sẽ code load trang tạo sự vui vẻ trong khi chờ trang load hết.

BƯỚC 1:
Vào theme đang sử dụng-> add stylesheet -> File Name -> ghi vào: progress-bar.css.
Bấm chọn : Write my own content.
Chép code này vào khung bên dưới:

Code:
 .well {
   font: bold 18px;
   background-color: #F7F7F7;
   background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
   background-repeat: repeat-x;
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
   overflow: hidden;
 }
 
 .progress-bar {
   animation: progress 3s;
   padding: .3em;
   text-align: center;
   color: rgba(255,255,255,100);
   background-image: linear-gradient(135deg, #26BDA6, #FF9F65, #DED37E);
   border-radius: 4px 4px 4px 4px;
 }
 
 @keyframes progress {
   from {
     width: 0;
     color: rgba(255,255,255,0);
   }
   to {
     width: 100%;
     color: rgba(255,255,255,1);
   }
 }

BƯỚC 2:
Vào Template đang sử dụng: -> Index Page Templates -> index.

Chép code này vào bất cứ chổ nào bạn muốn :

Code:
<div class="well">
  <div class="progress-bar"><img src="images/wellcome.gif"> <strong>Chào Mừng Quý Khách Đến....</strong> <img src="images/wellcome.gif"></div>
 </div>

Khi muốn điều chỉnh độ lớn nhỏ của font thì tìm tại: