Đăng nhập
Latest topics
» Tôi sẽ đỗ đại học!by nightWalker 9/2/2024, 7:00 pm
» Kỷ niệm xưa của chúng ta
by nightWalker 9/2/2024, 6:49 pm
» Bị lệch khung cần người giúp đỡ
by webhuy28 7/10/2021, 10:34 pm
» [HỎI ĐÁP] Danh sách bạn bè không thể hiển thị
by anhdaodaica1 2/10/2021, 10:04 pm
» [HỎI ĐÁP] Thông tin tài khoản không thể lưu thay đổi
by anhdaodaica1 2/10/2021, 6:05 am
» Phim bố già full
by huy.pc52 24/8/2021, 12:20 am
» Xin code Box HTML cho Forumvi
by Larva 1/7/2021, 12:57 pm
» Hello Anh Em Chinh phục
by HoàngTửNaivip5p 28/5/2021, 5:03 am
» Trang chủ tin tức cập nhật HOT 2016
by kenbi05 1/1/2020, 11:02 pm
» Không Dang9 bài viết = hình ảnh được
by huy.pc52 30/11/2019, 10:52 am
» CHÚC ANH EM NĂM MỚI VUI VẺ TRÀNG ĐẦY HẠNH PHÚC
by sps.kủn 12/2/2019, 1:16 pm
» Skin CNTT-K3 2015 (Full Mod)[✔]
by kenbi05 6/7/2018, 12:30 am
» baivong, handsome,....
by sps.kủn 29/6/2018, 1:54 pm
» [SHARE] SKIN ĐHFM.V7 @PUNBB
by tonyhoaivu 2/5/2018, 2:37 pm
» Share Skin Xanh Dương Cùi Bắp
by tonyhoaivu 28/4/2018, 5:57 pm
» Xin Skin http://v1.hotrofm.net/
by tonyhoaivu 28/4/2018, 5:45 pm
» Xin Skin Rao Vặt
by tonyhoaivu 15/4/2018, 12:07 pm
» Làm Sao Để Xóa Khung Này
by tonyhoaivu 14/4/2018, 7:18 pm
» [Lập nhóm]Lập nhóm fm
by vietkanpy 31/3/2018, 11:53 am
» [Help] về server úp ảnh của phutu [✔]
by baivong 17/3/2018, 10:18 pm
» Đừng khóc cho “tôi – Chinh Phục!”…
by AnHung 27/2/2018, 5:33 pm
» [Share] Skin Diendandaihoc.com [ Punbb ] [✔]
by Lu Mờ 13/2/2018, 7:28 pm
» Mời mấy thím vào groups Forumotion Việt Nam.
by dang02315 13/2/2018, 12:40 am
» Có thể làm các kiểu giao diện được không?
by Lu Mờ 9/2/2018, 3:40 pm
» ltns chinhphuc.info
by Shinichi Kudo 27/1/2018, 2:27 am
Top posting users this week
No user |
Hiệu ứng Loading với CSS3
5 posters
Trang 1 trong tổng số 1 trang
Hiệu ứng Loading với CSS3
[You must be registered and logged in to see this image.]
•Mô tả: Tut này được viết bằng CSS3 với các hiệu ứng di chuyển đơn giản•Demo:http://jdemo01.1talk.net
•Yêu cầu: Trình duyệt hỗ trợ CSS3
•Ghi chú: Không đem bán @@!
•Cách cài đặt: ACP Display Template overal_header(dùng cho tất cả các trang) hoặc index_body(dùng cho trang chính) Dán code 1 vào trước thẻ </head>(dùng overal_header) hoặc sau {JAVASCRIPT}(dùng index_body) Dán Code 2 vào sau đoạn
- Code:
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
•Code 1:
- Code:
<style type="text/css">
/*Loading CSS by Juskteez*/
.loadingfont
{
position:fixed;
font-family: 'Righteous', cursive;
width:100%;
padding:10px;
left:0px;
top:3000px;
opacity:0.0;
z-index:1;
animation:myfi 4s;
-moz-animation:myfi 4s; /* Firefox */
-webkit-animation:myfi 4s; /* Safari and Chrome */
}
@keyframes myfi
{
0% {left:0px;top:0;opacity:1;}
25% {left:0px;top:0;opacity:1;}
50% {left:0px;top:0;opacity:1;}
90% {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;}
}
@-moz-keyframes myfi /* Firefox */
{
0% {left:0px;top:0;opacity:1;}
25% {left:0px;top:0;opacity:1;}
50% {left:0px;top:0;opacity:1;}
90% {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;}
}
@-webkit-keyframes myfi /* Safari and Chrome */
{
0% {left:0px;top:0;opacity:1;text-shadow:0px 0px 10px #ffffff;}
25% {left:0px;top:0;opacity:1;text-shadow:0px 0px 20px #ffffff;}
50% {left:0px;top:0;opacity:1;text-shadow:0px 0px 10px #ffffff;}
75% {left:0px;top:0;opacity:1;text-shadow:0px 0px 20px #ffffff;}
90% {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;text-shadow:0px 0px 8px #ffffff;}
}
.loaderup
{
position:fixed;
width:100%;
height:1500px;
background:black;
top:-1520px;
left:0px;
z-index:1;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {top:0px;}
25% {top:0px;}
50% {top:0px;}
75% {top:0px;}
100% {top:-1520px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {top:0px;}
25% {top:0px;}
50% {top:0px;}
75% {top:0px;}
100% {top:-1520px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {top:0px;}
25% {top:0px;}
50% {top:0px;}
75% {top:0px;}
100% {top:-1520px;}
}
.loaderdown
{
position:fixed;
width:100%;
height:1500px;
background:black;
bottom:-1520px;
left:0px;
z-index:1;
animation:mysecond 5s;
-moz-animation:mysecond 5s; /* Firefox */
-webkit-animation:mysecond 5s; /* Safari and Chrome */
}
@keyframes mysecond
{
0% {bottom:1500px;}
25% {bottom:1500px;}
50% {bottom:1500px;}
75% {bottom:1500px;}
100% {bottom:-1500px;}
}
@-moz-keyframes mysecond /* Firefox */
{
0% {bottom:1500px;}
25% {bottom:1500px;}
50% {bottom:1500px;}
75% {bottom:1500px;}
100% {bottom:-1500px;}
}
@-webkit-keyframes mysecond /* Safari and Chrome */
{
0% {bottom:1500px;}
25% {bottom:1500px;}
50% {bottom:1500px;}
75% {bottom:1500px;}
100% {bottom:-1500px;}
}
</style>
- Code:
<div class="loaderdown"></div>
<div class="loaderup"></div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="loadingfont" style="height: 100%; width: 100%; ">
<tbody>
<tr>
<td style="text-align: center; ">
<strong><span style="font-size:48px;"><span style="color: rgb(255, 255, 255); ">Loading</span></span></strong></td>
</tr>
</tbody>
</table>
by Juskteez
Re: Hiệu ứng Loading với CSS3
hik
header k có đoạn
header k có đoạn
- Code:
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
Re: Hiệu ứng Loading với CSS3
hix , mình cài sng thì nó ra hiệu ứng , nhưng thư mục thì mất tiêu , bạn nào HD lại dùm mình được không ?
Re: Hiệu ứng Loading với CSS3
baoden.mango đã viết:hik
header k có đoạn
- Code:
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
Thế thì bỏ sau thẻ <body>, hoặc bỏ đâu cũng được miễn là phải trước thẻ nào có thuộc tính z-index trong CSS = 1
sweetboy785 đã viết:hix , mình cài sng thì nó ra hiệu ứng , nhưng thư mục thì mất tiêu , bạn nào HD lại dùm mình được không ?
Mình xin cái link nào!
Re: Hiệu ứng Loading với CSS3
Theo mình thì cái này không ổn đâu. Mỗi lần trở về trang chủ đều loading thì khá phiền, nhưng vẫn vote vì rất đẹp
Similar topics
» Lá cờ Tổ quốc với CSS3
» Tạo Button với CSS3
» [TUT] Một vài CSS3 Background[✔]
» Kwick slider với CSS3
» [Thắc mắc] Css3 thay ảnh ẩn = backgroud
» Tạo Button với CSS3
» [TUT] Một vài CSS3 Background[✔]
» Kwick slider với CSS3
» [Thắc mắc] Css3 thay ảnh ẩn = backgroud
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|