/* Code gốc viết bởi ngocminh.info bằng javascript và CSS3. Code dưới đây được viết hoàn toàn bằng CSS3 bởi Zzbaivong - devs.forumvi.com */ *{ padding: 0; margin: 0; } body { background: #79a529 } .wrapper { background: #c9e8ea url(http://i.imgur.com/DFHkyVr.jpg); width: 100%; height: 520px; 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: 520px; overflow: hidden; margin: 0; width: 100%; z-index: 0; animation: cloud 15s linear infinite; -webkit-animation: cloud 15s linear infinite; } #index4_street { position: absolute; background: url(http://i.imgur.com/hYxr3TA.png) bottom left repeat-x; top: 236px; left: 0; z-index: 2; 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: 200px; margin-left: 100px; } #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; } }