css3类似flap小游戏

下载地址

在CSS写完全,因为以前使用物理引擎实现让人们愤怒和生气……HTML

CSShtml { background: #333; overflow-x: hidden;}.sprite { background-image: url("http://i.imgur.com/01JdFPl.png");}.canvas { height: 256px; cursor: pointer; position: relative; background: url("http://i.imgur.com/FLqikK8.png?1"); animation: scroll 10s linear infinite; box-shadow: 0 0 10em #000;}.bird-box { width: 17px; height: 12px; position: absolute; left: 10%; top: 60%; transition: top 1.5s;}.canvas:active .bird-box { top: 10%; transform: rotate(-15deg);}.bird { height: 100%; background-position: -264px -64px; transform: translateY(-50%); animation: flap 1s steps(2) infinite, hover .5s ease-in-out infinite alternate;}.ground { position: absolute; bottom: 0; left: 0; height: 56px; width: 100%; background: url("http://i.imgur.com/Lg9kg5Y.png"); animation: scroll 5s linear infinite;}.pipe { width: 26px; height: 256px; position: absolute; top: 0; left: 100%; animation: passby 30s linear infinite; background: url("http://i.imgur.com/9Cxyyur.png"); background-position-y: -75px;}.pipe:nth-of-type(2) { animation-delay: 1.5s; background-position-y: 0;}.pipe:nth-of-type(3) { animation-delay: 3s; background-position-y: -115px;}.pipe:nth-of-type(4) { animation-delay: 4.5s; background-position-y: -30px;}@keyframes flap { to { background-position-y: -116px }}@keyframes hover { to { transform: translateY(50%) }}@keyframes scroll { to { background-position-x: -144px }}@keyframes passby { to { left: -10%; }}

dd: