Птицы, парящие в небе на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; } #canv { z-index: 99; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: -webkit-linear-gradient(#B7B0E3, #FFD3D6); background: linear-gradient(#B7B0E3, #FFD3D6); } @-webkit-keyframes anim { from { -webkit-transform: translateX(200%); transform: translateX(200%); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes anim { from { -webkit-transform: translateX(200%); transform: translateX(200%); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes anime { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes anime { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } .c1, .c2 { width: 800px; height: 700px; position: absolute; background: transparent url("/img/clouds.png") 0 0 no-repeat; background-size: 100%; z-index: 999; } .c1.one, .c2.one { top: -260px; left: 0px; } .c1.two, .c2.two { top: -200px; left: 100px; } .c1.three, .c2.three { top: -240px; right: 100px; } .c1.four, .c22.four { top: -180px; right: 0px; } .c2 .one { top: -209px; } @media (max-width: 1023px) { .c2.one { left: -80px; } .c2.two { left: -120px; } .c2.three { right: 220px; } .c2.four { right: 220px; } } .c1 { -webkit-animation: anime 1000s linear infinite forwards; animation: anime 1000s linear infinite forwards; } .c2 { -webkit-transform: translateX(200%); transform: translateX(200%); -webkit-animation: anim 1000s linear infinite forwards; animation: anim 1000s linear infinite forwards; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<canvas id="canv"></canvas> <div class="sky"> <div class="clouds"> <div class="c1 one"></div> <div class="c1 two"></div> <div class="c1 three"></div> <div class="c1 four"></div> <div class="c2 one"></div> <div class="c2 two"></div> <div class="c2 three"></div> <div class="c2 four"></div> </div> </div> <script src='/js/bird.js'></script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
