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

15.04.14 16:331

anhoang_qn

Demo ban ngày (từ 6h -> 18h)

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

Demo ban đêm

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

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

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

anhoang_qn