123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- .game{
- width: 600px;
- height: 200px;
- border-bottom: 1px solid #000;
- margin: auto;
- }
- #dino{
- width: 50px;
- height: 50px;
- background-image: url(img/dino.jpg);
- background-size: 50px 50px;
- position: relative;
- top: 150px;
- }
- #cactus{
- width: 20px;
- height: 40px;
- background-image: url(img/cactus.png);
- background-size: 20px 40px;
- position: relative;
- top: 110px;
- left: 580px;
- animation: cactusMov 2s infinite linear;
- }
- @keyframes cactusMov{
- 0%{
- left: 580px;
- }
- 100%{
- left: -20px;
- }
- }
- .jump{
- animation: jump 0.3s linear;
- }
- @keyframes jump{
- 0%{
- top: 150px;
- }
- 30%{
- top: 130px;
- }
- 50%{
- top: 80px;
- }
- 80%{
- top: 130px;
- }
- 100%{
- left: 1500px;
- }
- }
|