backgroundImage из div'ов
Доброго времени суток! Есть идея по созданию двойных обоев на сайте. Первый (нижний слой) - просто сплошной цвет, а второй - div с @keyframes. Как реализовать это на js, если backgroundImage не вариант :blink: ?
Тот самый div: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #003366; } .star { width: 18px; height: 18px; border: 1px solid transparent; position: relative; } .star > * { position: absolute; background: white; width: 2px; height: 2px; } .point1 { animation: p1 linear infinite 1.5s; left: 8px; } .point2 { animation: p2 linear infinite 1.5s; top: 8px; } .point3 { left: 8px; animation: p3 linear infinite 1.5s; } .point4 { animation: p4 linear infinite 1.5s; top: 8px; } .point5 { animation: p5 linear infinite 1.5s; } .point6 { animation: p6 linear infinite 1.5s; } .point7 { animation: p7 linear infinite 1.5s; } .point8 { animation: p8 linear infinite 1.5s; } @keyframes p1 { 0% { top: 8px; } 25% { top: 0px; height: 6px; } 50% { top: 0px; height: 2px; } 75% { top: 0px; height: 6px } 100% { top: 8px; height: 2px; } } @keyframes p2 { 0% { right: 8px; } 25% { right: 0px; width: 6px; } 50% { right: 0px; width: 2px } 75% { right: 0px; width: 6px; } 100% { right: 8px; width: 2px; } } @keyframes p3 { 0% { bottom: 8px; } 25% { bottom: 0px; height: 6px; } 50% { bottom: 0px; height: 2px; } 75% { bottom: 0px; height: 6px } 100% { bottom: 8px; height: 2px; } } @keyframes p4 { 0% { left: 8px; } 25% { left: 0px; width: 6px; } 50% { left: 0px; width: 2px } 75% { left: 0px; width: 6px; } 100% { left: 8px; width: 2px; } } @keyframes p5 { 0% { left: 8px; top: 8px; } 25% { left: 8px; top: 8px; } 50% { left: 2px; top: 2px; } 75% { left: 8px; top: 8px; } 100% { left: 8px; top: 8px; } } @keyframes p6 { 0% { right: 8px; top: 8px; } 25% { right: 8px; top: 8px; } 50% { right: 2px; top: 2px; } 75% { right: 8px; top: 8px; } 100% { right: 8px; top: 8px; } } @keyframes p7 { 0%{ right: 8px; bottom: 8px; } 25% { right: 8px; bottom: 8px; } 50% { right: 2px; bottom: 2px; } 75% { right: 8px; bottom: 8px; } 100% { right: 8px; bottom: 8px; } } @keyframes p8 { 0%{ left: 8px; bottom: 8px; } 25% { left: 8px; bottom: 8px; } 50% { left: 2px; bottom: 2px; } 75% { left: 8px; bottom: 8px; } 100% { left: 8px; bottom: 8px; } } </style> </head> <body> <div class="star"> <div class="point1"></div> <div class="point2"></div> <div class="point3"></div> <div class="point4"></div> <div class="point5"></div> <div class="point6"></div> <div class="point7"></div> <div class="point8"></div> </div> </body> </html> |
Часовой пояс GMT +3, время: 02:33. |