- Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.
В области комментариев к предыдущей статье кто-то сообщил мне исходные адреса этих загрузок (потому что я этого раньше не знал, поэтому эта статья добавлена):адрес
предисловие
Чтобы уточнить факт:Нагрузка, задействованная в этой серии, собрана и не осознана автором.Эта статья посвящена только анализу CSS. Если вам это не нравится, не распыляйте! ! !.
Если вам это нравится, пожалуйста, дайте бесплатный лайк, добро пожаловать на обмен в области комментариев
Зачем писать такую статью? Когда мы обычно разрабатываем, мы сталкиваемся с загрузкой, то ли в UI-фреймворке, то ли Baidu, а потом CV в проект? Однако, когда вы это осознаете сами, у вас не будет ни малейшего представления. Со временем я стал CV-инженером. В этой статье объясняются идеи различных способов загрузки, надеюсь, каждый сможет их не только использовать, но и писать.Практика приносит истинное знание.
Эта статья только знакомиткруговая загрузка. Другие будут рассмотрены в других статьях.
loader-1
Это должен быть самый простой CSS для загрузки. На круге есть красная дуга.Если вы присмотритесь, то обнаружите, что эта дуга составляет ровно 1/4.
Логика реализации:
Контейнер одинаковой ширины и высоты с белой рамкой. Затем установите нижний край красным,Когда радиус границы установлен на 50%, он может просто стать кругом.
Добавьте анимацию вращения к кругу. Анимация угла поворота в CSS — это rotate(), нам нужно только настроить его на вращение от 0 до 360.(Эта анимация будет многократно использована ниже и не будет повторяться ниже)
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
полный код
.loader-1 {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
loader-2
Наблюдение: периферия представляет собой круг с вращающимся внутри красным элементом.
Реализовать логику
Контейнер одинаковой ширины и высоты, с белыми краями и закругленными на 50% углами. Это внешний круг.
Как достигается красный цвет внутри? Здесь есть две идеи. 1; Добавьте небольшой div, вставьте его в него и установите красную нижнюю границу, как у loader-1. 2: Используйте ::after, идея та же, что и в методе 1.
Плюс анимация вращения.
полный код
.loader-2 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-2:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}
loader-3
Наблюдение: внутри — круг, а снаружи — красная дуга.
реализовать логику
Этот эффект загрузки такой же, как у загрузчика-2, разница в том, что красная дуга находится внутри и снаружи.
полный код
.loader-3 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-3:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #FF3D00;
}
loader-4
Наблюдение: есть круг снаружи и два круга внутри, и эти два круга абсолютно симметричны.
реализовать логику
Контейнер одинаковой ширины и высоты, с белыми краями и закругленными на 50% углами. Это внешний круг.
Как достигается красный цвет внутри? Здесь есть две идеи. 1. Добавьте два маленьких элемента div, установите красный цвет фона и закруглите углы на 50%, чтобы они выглядели как две маленькие точки. 2: Используйте ::after и ::before, идея та же, что и в методе 1.
Плюс анимация вращения.
полный код
.loader-4 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-4:before {
left: auto;
top: auto;
right: 0;
bottom: 0;
content: "";
position: absolute;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(-150%, -150%);
border-radius: 50%;
}
.loader-4:after {
content: "";
position: absolute;
left: 0;
top: 0;
background: #FF3D00;
width: 6px;
height: 6px;
transform: translate(150%, 150%);
border-radius: 50%;
}
loader-5
Наблюдение: всего три слоя: самый внешний белый круг, средний красный круг и внутренний белый круг. Каждый круг имеет полукруглую выемку, а внешний и самый внутренний круги вращаются в одном направлении.
реализовать логику
Контейнер одинаковой ширины и высоты, с белыми краями и закругленными на 50% углами. Это внешний круг.
Проблема здесь в том, как реализовать разрыв круга, что на самом деле очень просто.В css есть значение атрибута:transparent, и используйте это значение, чтобы сделать границу прозрачной, чтобы получить зазор.
Для внутренних красных и белых дуг продолжайте использовать ::after и ::before.
Плюс анимация, вот анимация, которая вращается в обратную сторону (rotationBack). Здесь поворот установлен на отрицательный угол, и поворот может быть повернут в противоположном направлении.
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
полный код
.loader-5 {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-5:before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
-webkit-animation: rotation 1.5s linear infinite;
animation: rotation 1.5s linear infinite;
}
.loader-5:after, .loader-5:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #FF3D00 #FF3D00;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-animation: rotationBack 0.5s linear infinite;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center; *
}
loader-6
Наблюдение: выглядит как часы со стрелкой внутри круга.
реализовать логику
Контейнер одинаковой ширины и высоты, с белыми краями и закругленными на 50% углами. Это внешний круг.
Как реализованы указатели:С этого момента мы больше не будем обсуждать ситуацию с добавлением div. На самом деле красный указатель — это простой контейнер с непостоянной шириной и высотой.
полный код
.loader-6 {
width: 48px;
height: 48px;
border: 2px solid #FFF;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-6:after {
content: "";
position: absolute;
left: 50%;
top: 0;
background: #FF3D00;
width: 3px;
height: 24px;
transform: translateX(-50%);
}
loader-7
Наблюдение: Сначала определите несколько кругов, всего два. Когда первый круг не исчез, появился второй круг. В итоге появился водоподобный эффект. Также обратите внимание, что два круга имеют одинаковый размер, потому что они заканчиваются в одном и том же месте.
реализовать логику
Сначала определите, находятся ли два круга на контейнере. Вышеупомянутое всегда добавляло границу к контейнеру.Конечно, этот пример также возможен, но для простоты реализации мы поместили эти два круга в ::after и ::before.
При анимации круг здесь постепенно увеличивается, а в CSS масштаб используется для увеличения и уменьшения элементов. При этом, чтобы добиться эффекта постепенно четких рябей, добавляем прозрачность.
@keyframes animloader7 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
полный код
Здесь, поскольку два круга появляются один за другим, требуется круг плюс задержка.
.loader-7 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader-7::after, .loader--7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}
.loader-7::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.loader-7::after, .loader-7::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #FFF;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader7 2s linear infinite;
animation: animloader7 2s linear infinite;
}
loader-8
Наблюдение: Дуга плюс треугольник.
реализовать логику
Контейнер одинаковой ширины и высоты, с белыми краями и закругленными на 50% углами. Это внешний круг.
transparent, и используйте это значение, чтобы сделать границу прозрачной, чтобы получить зазор.
Создайте стрелки на :after. Есть много способов реализовать треугольники в CSS. Самый простой — использовать границу. Вам не нужно задавать ширину и высоту элемента. Вам нужно только установить размер границы, и только установить цвет на одна сторона.
border: 10px solid transparent;
border-right-color: #FFF
Плюс анимация вращения.
полный код
.loader-8 {
width: 48px;
height: 48px;
border: 3px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
position: relative;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.loader-8:after {
content: "";
position: absolute;
left: 20px;
top: 31px;
border: 10px solid transparent;
border-right-color: #FFF;
transform: rotate(-40deg);
}
постскриптум
Это непросто организовать, попросите бесплатный лайк, добро пожаловать на обмен в комментариях.