+- F@rum_Haiquan.info (*_*) (http://haiquan.info/F@rum)
+-- Diễn đàn: TIN HỌC- CÔNG NGHỆ (http://haiquan.info/F@rum/forumdisplay.php?fid=101)
+--- Diễn đàn: MÃ NGUỒN (http://haiquan.info/F@rum/forumdisplay.php?fid=102)
+---- Diễn đàn: MYBB (http://haiquan.info/F@rum/forumdisplay.php?fid=103)
+---- Chủ đề: Code load trang bằng css (/showthread.php?tid=1895)
Code load trang bằng css - ngocvu1403 - 25-09-2014
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:
Trích dẫn:.well {Thay thông số nó theo ý bạn
font: bold 18px;
Khi muốn thay hình ảnh thì tìm tại :
Trích dẫn:<img src="images/wellcome.gif">Thay hình theo ý bạn
Xong rồi đó, ra xem trang chủ khi load trang còn buồn chán không nhé.
Theo PCNDL.