Введение
В этом практическом занятии мы углубимся в мир программирования CSS и изучим различные методы для улучшения дизайна и макета веб-страниц. С помощью серии упражнений и задач вы научитесь использовать селекторы, свойства и значения CSS для стилизации HTML-элементов и создания визуально привлекательных веб-страниц. В конце практического занятия вы приобретете твердый фундамент в программировании CSS и сможете применить свои новые знания для создания потрясающих сайтов.
Торсионный спиннер
В ВМ уже предоставлены index.html и style.css.
Для индикации загрузки контента создайте торсионный спиннер с полупрозрачной рамкой для всего элемента. Исключите одну сторону, чтобы она служила индикатором загрузки для тора. Затем определите и используйте соответствующую анимацию, используя transform: rotate() для вращения элемента. Вот пример кода на HTML и CSS:
HTML:
<div class="donut"></div>
CSS:
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие по Торсионному спиннеру. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.