[TUTs] Banner bé gái đạp xe CSS3 cho forum teen

  Bài viết hay nhất1
Demo ban ngày (từ 6h -> 18h)



Demo ban đêm



Demo online

http://jsfiddle.net/baivong/Y5rVb/show/


Hướng dẫn

Trong temp overall_header, tìm:
Code:
<div class="minwidth_IE">
... thêm vào phía trên:
Code:
<div class="banner">
   <div id="snow" class="wrapper">
      <div id="hoangmt">
      </div>
      <div id="index1_cloud">
      </div>
      <div id="index4_street">
      </div>
      <div id="index4_mol">
         <div id="index4_ball">
         </div>
         <div style="position: absolute;top:195px;left:7px;">
            <img alt="" src="http://i.imgur.com/gjQv0ne.png" width="115" height="114" border="0" class="wheel" />
         </div>
         <div style="position: absolute;top:195px;left:234px;">
            <img alt="" src="http://i.imgur.com/gjQv0ne.png" width="115" height="114" border="0" class="wheel" />
         </div>
         <img alt="" src="http://i.imgur.com/23CE6mu.gif" width="130" height="109" border="0" id="molava" />
         <div id="index4_word">
         </div>
         <img alt="" src="http://i.imgur.com/vLBYqcW.png" border="0" id="bicycle" />
         <div id="smokeSpawnPoint" style="position: absolute;top: 120px; left: 300px">
            <img alt="ok" src="http://i.imgur.com/23CE6mu.gif" width="50" height="50" />
            <img src="http://i.imgur.com/gtMFku5.png" alt="puff" class="puff" id="puff_1" style="left: -30px; z-index: 25; position: absolute;" />
            <img src="http://i.imgur.com/gtMFku5.png" alt="puff" class="puff" id="puff_2" style="left: -15px; z-index: 20; position: absolute;" />
            <img src="http://i.imgur.com/gtMFku5.png" alt="puff" class="puff" id="puff_3" style="left: -25px; z-index: 30; position: absolute;" />
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
//<![CDATA[
var today = new Date,
   h = today.getHours();
5 < h && 18 > h ? ($("#hoangmt").css({
   background: "#FFFFB8",
   "box-shadow": "0px 0px 90px rgb(237, 252, 67), 0px 0px 90px rgb(237, 252, 67), 0px 0px 90px rgb(237, 252, 67)",
   right: "50px",
   left: "inherit"
}), $(".wrapper").css("background", "#c9e8ea url(http://i.imgur.com/DFHkyVr.jpg)"), $("#index1_cloud").css("opacity", 1)) : $("#hoangmt, .wrapper, #index1_cloud").removeAttr("style");
//]]>
</script>

Thêm vào CSS
Code:
.wrapper{background:#222;width:100%;height: 388px;text-align:center;margin:0 auto}
#index1_cloud{background:url(http://i.imgur.com/qOVmGsv.png) top left repeat-x;position:absolute;top:0;left:0;height: 388px;overflow:hidden;margin:0;width:100%;z-index:0;animation:cloud 15s linear infinite;-webkit-animation:cloud 15s linear infinite;opacity:0.1}
#index4_street{position:absolute;background:url(http://i.imgur.com/hYxr3TA.png) bottom left repeat-x;top:104px;left:0;width:100%;height:284px;animation:street 7s linear infinite;-webkit-animation:street 7s linear infinite}
#index4_mol{height:340px;position:absolute;z-index:3;top:75px;margin-left:800px}
#index4_word{background-image:url(http://i.imgur.com/w5xNx25.png);background-position:-10px -10px;width:156px;height:128px;display:block;position:absolute;left:-20px;top:0;opacity:0;transition:opacity 1s;-webkit-transition:opacity 1s}
#index4_ball{background-image:url(http://i.imgur.com/w5xNx25.png);background-position:-8px -159px;width:90px;height:114px;position:absolute;top:-100px;left:20px;animation:ball 20s linear infinite;-webkit-animation:ball 20s linear infinite}
.centerdiv{text-align:left}
#index4_mol #molava{background-image:url(http://i.imgur.com/w5xNx25.png);background-position:-10px -293px;position:absolute;left:154px;top:0;width:130px;height:109px}
#index4_mol #molava:hover{background-position:-140px -293px}
#index4_mol #molava:hover + #index4_word{opacity:1;transition:opacity 1s;-webkit-transition:opacity 1s}
#index4_mol #bicycle{width:355px;height:173px;position:absolute;top:109px;left:0}
.wheel{animation:wheel 1.3s linear infinite;-webkit-animation:wheel 1.3s linear infinite}
#puff_1{animation:puff 7s linear infinite;-webkit-animation:puff 7s linear infinite}
#puff_2{animation:puff 8.5s linear infinite;-webkit-animation:puff 8.5s linear infinite}
#puff_3{animation:puff 10s linear infinite;-webkit-animation:puff 10s linear infinite}
@keyframes cloud{from{background-position:0 0}
to{background-position:861px 0}
}
@-webkit-keyframes cloud{from{background-position:0 0}
to{background-position:861px 0}
}
@keyframes street{from{background-position:0 0}
to{background-position:1000px 0}
}
@-webkit-keyframes street{from{background-position:0 0}
to{background-position:1000px 0}
}
@keyframes ball{0%{top:-95px;left:30px}
10%{top:-100px;left:40px}
17%{top:-85px;left:40px}
25%{top:-95px;left:65px}
30%{top:-90px;left:55px}
42%{top:-50px;left:75px}
50%{top:-40px;left:90px}
58%{top:-35px;left:85px}
65%{top:-43px;left:70px}
70%{top:-55px;left:75px}
85%{top:-77px;left:50px}
80%{top:-90px;left:50px}
95%{top:-110px;left:30px}
100%{top:-95px;left:30px}
}
@-webkit-keyframes ball{0%{top:-95px;left:30px}
10%{top:-100px;left:40px}
17%{top:-85px;left:40px}
25%{top:-95px;left:65px}
30%{top:-90px;left:55px}
42%{top:-50px;left:75px}
50%{top:-40px;left:90px}
58%{top:-35px;left:85px}
65%{top:-43px;left:70px}
70%{top:-55px;left:75px}
85%{top:-77px;left:50px}
80%{top:-90px;left:50px}
95%{top:-110px;left:30px}
100%{top:-95px;left:30px}
}
@keyframes wheel{from{transform:rotate(360deg)}
to{transform:rotate(0deg)}
}
@-webkit-keyframes wheel{from{-webkit-transform:rotate(360deg)}
to{-webkit-transform:rotate(0deg)}
}
@keyframes puff{0%{top:0;opacity:0;width:1px;height:1px}
35%{top:-190px;opacity:1;width:94px;height:105px}
43%{top:-200px;opacity:1;width:94px;height:105px}
75%{top:-300px;opacity:0;width:94px;height:105px}
100%{top:0;opacity:0;width:1px;height:1px}
}
@-webkit-keyframes puff{0%{top:0;opacity:0;width:1px;height:1px}
25%{top:-190px;opacity:1;width:94px;height:105px}
30%{top:-200px;opacity:1;width:94px;height:105px}
55%{top:-300px;opacity:0;width:94px;height:105px}
100%{top:0;opacity:0;width:1px;height:1px}
}
#hoangmt{position: absolute;margin-left:100px;width:100px;height:100px;background: #FFFFFF;box-shadow: 0px 0px 90px rgb(255, 255, 255), 0px 0px 90px rgb(255, 255, 255), 0px 0px 90px rgb(255, 255, 255);border-radius:100%;top:30px;left:30px}
Lưu ý :

Trong code bỏ vào head có đoạn script phân biệt ngày đêm - nếu là khoảng time từ 6h sáng đến 18h chiều thì sẽ là ban ngày và banner sẽ là ban ngày - còn ngoài khoảng time đó sẽ là ban đêm và banner sẽ xuất hiện mặt trăng bên trái (ban ngày thì mặt trời bên phải) - bạn có thể tuỳ chỉnh thêm nếu muốn (nếu bạn nào thấy không tự chuyển ngày và đêm thì reply tại đây)

Code bé đi xe đạp được viết bởi ngocminh.info và viết lại bằng CSS3 bởi Zzbaivong

Coppy bài đi nơi khác vui lòng ghi rõ nguồn : devs.forumvi.com hoặc http://devs.forumvi.com

---hết bài---


anhoang_qn
  Bài viết hay nhất2
Thực sự thì không quan tâm lắm đến con bé, quan tâm chủ yếu cái ngày đêm thôi :v
LIke nè like nè
  Bài viết hay nhất3
NCat wrote:Thực sự thì không quan tâm lắm đến con bé, quan tâm chủ yếu cái ngày đêm thôi :v
LIke nè like nè
trình còn kém - mới học đc cái hàm if + cái get date nên viết thử xem sao - ai ngờ được mừng quá share luôn :3
  Bài viết hay nhất4
Giờ mới để ý cái js, có mỗi 1 điều kiện mà lặp lại 3 lần, hàm .css() lại không dùng, đi dùng hàm .attr(), để ad sửa luôn vậy >:(
  Bài viết hay nhất5
rất hay cho kiểu banner này
  Bài viết hay nhất6
Nó không hoạt động!
vnstudent.forumi.biz
  Bài viết hay nhất7

duythanhbt7321 wrote:Nó không hoạt động!
vnstudent.forumi.biz

có code đâu mà hoạt vs chả động @@
  Bài viết hay nhất8
cho em hỏi ngu cái css này thì thêm vào đâu ạ?
  Bài viết hay nhất9

hoclamweb wrote:cho em hỏi ngu cái css này thì thêm vào đâu ạ?

ACP >> Display >> Color >> CSS Stylesheet
  Bài viết hay nhất10
Của mình nó không chạy xe như demo. thongtintructuyentes.forumvi.com
pass: 103301ns1983
You cannot reply to topics in this forum