Guest Posted October 2, 2017 Share Posted October 2, 2017 Loader на тип загрузки игры NFS Hot Pursuit. Смотрится красиво, можно использовать за место логотипа. Я же для теста прописал его в footer Примерно вот так: И так сам код: Вставляем где хотим видеть лоадер. <ul class="loader"> <li>E</li> <li>T</li> <li>S</li> <li>2</li> <li>A</li> <li>T</li> <li>S</li> <li>M</li> <li>O</li> <li>D</li> <li>S</li> <li>.</li> <li>R</li> <li>U</li> </ul> Это вставляем в custom.css h1 { font-family: "palatino linotype", sans-serif; color: #0abcde; margin: 50px 0 50px 50px; } .loader li { background: #0abcde; margin-left: 1px; width: 20px; height: 30px; display: inline-block; opacity: 0; border-radius: 2px; box-shadow: 0px 0px 5px #0abcde; transform: skew(-25deg, 0deg) scale(0.1); animation: loader .8s ease-in-out infinite alternate; } @keyframes loader { to { transform: skew(-25deg, 0deg) scale(1); opacity: 1; } } .loader li:nth-child(2){ animation-delay:0.2s; } .loader li:nth-child(3){ animation-delay:0.4s; } .loader li:nth-child(4){ animation-delay:0.6s; } .loader li:nth-child(5){ animation-delay:0.8s; } .loader li:nth-child(6){ animation-delay: 1s; } .loader li:nth-child(7){ animation-delay: 1.2s; } .loader li:nth-child(8){ animation-delay:1.4s; } .loader li:nth-child(9){ animation-delay:1.6s; } .loader li:nth-child(10){ animation-delay:1.8s; } .loader li:nth-child(11){ animation-delay:2.0s; } .loader li:nth-child(12){ animation-delay: 2.2s; } .loader li:nth-child(13){ animation-delay: 2.4s; } .loader li:nth-child(14){ animation-delay: 2.6s; } И так, сколько букв вставлено к коде, столько мы дописываем в CSS. Пример я добавил букву <li>E</li> она первая в очереди, а в CSS я вставляю .loader li:nth-child(2){ animation-delay:0.2s; } когда вставляю второй код с другой буквой, то в коде CSS я пишу уже 3 и ставлю миллисекунды на 0.4 2 это номер буквы в коде. 0.2s это миллисекунды, через которое будет срабатывать появление буквы или эффекта. как видите в коде CSS миллисекунды прибавляются на 0.2 мс тем самым идет эффект перехода, на GIFке всё видно. Или же можно в живую посмотреть у меня на сайте, в стиле Стандартный стиль. 1 Link to comment Share on other sites More sharing options...
Guest Posted October 3, 2017 Share Posted October 3, 2017 Тоже делаем с помощью svg Link to comment Share on other sites More sharing options...
Recommended Posts