Сквозь вселенную на Tree Canvas и HTML5
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 |
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } body { background: linear-gradient(180deg, #373773, #235689, #2a9096, #364a7b, #4a367b, #5e3665, #2c294b, #31437a); background-size: 1600% 1600%; -webkit-animation: skygradient 180s ease infinite; -moz-animation: skygradient 180s ease infinite; -o-animation: skygradient 180s ease infinite; animation: skygradient 180s ease infinite; } @-webkit-keyframes skygradient { 0% { background-position: 50% 0% } 50% { background-position: 50% 100% } 100% { background-position: 50% 0% } } @-moz-keyframes skygradient { 0% { background-position: 50% 0% } 50% { background-position: 50% 100% } 100% { background-position: 50% 0% } } @-o-keyframes skygradient { 0% { background-position: 50% 0% } 50% { background-position: 50% 100% } 100% { background-position: 50% 0% } } @keyframes skygradient { 0% { background-position: 50% 0% } 50% { background-position: 50% 100% } 100% { background-position: 50% 0% } } canvas { width: 100%!important; height: 100%!important; } |
1 2 3 |
<div id="universe"></div> <script src="/js/three.min2.js"></script> <script src="/js/uv.js"></script> |
http://vvl99.narod.ru/space_3d/1_0/OXKqXJ.html
В анимации появляются планеты солнечной системы с оригинальными текстурами - "Земля", "Юпитер", "Марс", "Меркурий", "Луна", "Нептун", "Плутон", "Сатурн", "Солнце", "Уран", "Венера", а также вымышленные объекты.
Стартовый вариант видимо тот же - https://cdpn.io/made-on-mars/fullpage/OXKqXJ
Добавил большой барабум, чтобы было понятнее, почему обломки летят в 3022 году.
http://vvl99.narod.ru/space_3d/1_0/OXKqXJTest2.html