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

Code:

<div class="minwidth_IE">

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>

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 https://devs.forumvi.com

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è

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

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