1. Делаем фон
1.1 Как квази-фронтенд, который только планирует войти в индустрию, у него нет фундамента, пока он учится шаг за шагом под руководством старших в Интернете. Первый шаг — изучить использование CSS3. На начальном этапе я сделал несколько относительно простых имитаций главной страницы веб-сайта, а теперь хочу попробовать создание анимационных эффектов. Если что-то не так, пожалуйста, критикуйте и поправляйте меня: я хочу добиться прогресса!
1.2 У меня нет художественной базы и я не умею проектировать, поэтому наткнулся на очень интересный кейс и захотел попробовать. Пока не видел исходный код. Эффект других полностью не реализован, и у меня будет возможность подробно пересмотреть его в будущем. Мне не удалось добиться восстановления на уровне пикселей, поэтому младший брат, которого я сделал, не похож на других...
Источник (я сделал случай 1):Ссылка Описание
Вот мой полный код на GitHub:Ссылка Описание
2. Статический эффект
2.1 Справочная часть
2.1.1 Первый — это круговой фон на картинке, которого легче добиться.
Чтобы быть расположенным в центре экрана, есть определенное расстояние от вершины, сначала установите следующий стиль:
<body>
<div class="container">
</div>
</body>body{
margin:50px 0 0 0;
}
.container{
margin-left:auto;
margin-right: auto;
}Ниже приводится конкретное содержание: HTML-код выглядит следующим образом:
<div class="bg-circle">
<div class="bg"></div>
</div>Код css выглядит следующим образом:
.bg{
height: 30px;
width: 300px;
background-color: #699;
}
.bg-circle{
margin-left:auto;
margin-right:auto;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}Вообще говоря, часть css может быть отдельным файлом, при его импорте вам нужно только написать это предложение в
: <link rel="stylesheet" href="shakehead.css">Я помещаю эту html-страницу и css-страницу в один и тот же каталог, поэтому имя файла можно напрямую записать в пути href. В приведенном выше коде:
margin-left:auto;margin-right:auto;可以确保水平方向的居中显示。
border-radius: 50%;可以把正方形变成一个正圆。
overflow: hidden;可以确保子元素不会超出这个元素所给出的区域。Кроме того, поскольку .bg-circle устанавливает значение overflow: hidden, поэтому, пока ширина и высота .bg больше 300 пикселей, разницы нет вообще (закрывая лицо...).
2.1.2 Слева и справа есть тень.Учитывая, что она не может выходить за круглую границу, ее необходимо использовать как вложенный тег .bg-circle: HTML-код выглядит следующим образом:
<div class="bg-circle">
<div class="bg"></div>
<div class="shadow-left"></div>
<div class="shadow-right"></div>
</div>Код css выглядит следующим образом:
.shadow-left{
position: absolute;
z-index: 59;
width: 240px;
height: 100px;
background-color: #476b6b;
opacity: .8;
transform: rotate(45deg);
}
.shadow-right{
position: absolute;
width: 320px;
height: 100px;
background-color: #e0ebeb;
opacity: .7;
transform: rotate(-35deg);
}Если вы были внимательны, то должны были обнаружить, что тень слева немного закрывает тело мальчика, а также закрывает букву, поэтому она выше, чем другие слои. Необходимо установить атрибут z-index.Конкретное значение может быть написано в соответствии с данными слоя, который вы хотите наложить.Если он больше 1 пункта, он также больше, и сестра также выше , хе-хе! Однако, если вы хотите установить z-индекс, вы должны установить положение: относительное, абсолютное или фиксированное.
Кроме того, если это просто наклон, можно выполнить transform: rotate(Xdeg);, но иногда необходимо учитывать позиционирование наклоненного элемента, поэтому, если вы более строги, вы также можете установить атрибут transform-origin. . В Интернете довольно много приложений для этого, я думаю, что большинство людей могут это понять. Главное помнить: первое значение по горизонтали (X), второе значение по вертикали (Y); центр по умолчанию 50%, 50%, левый верхний угол 0, 0, правый нижний угол 100 %, 100%.
Но поскольку эти две тени появились через некоторое время, их нельзя увидеть после написания кода. Для отладки вы можете временно поместить в конечное положение:
.shadow-left{
left:-100px;bottom:-10px;
}
.shadow-right{
right: -100px;bottom:10px;
}；Или щелкните правой кнопкой мыши и проверьте, в области «Элементы» выберите тег, который вы хотите увидеть, и вы также можете показать, где он находится.
2.2 Голова персонажа
2.2.1 Голова человека, состав всей структуры следует рассматривать как наиболее сложную фигуру. С конца, я хочу быть чистым веб-сайтом CSS3, вы стараетесь не полагаться на большинство режущих планов, чтобы закончить; из эффекта, почти каждое действие должно иметь часть, голова вырезать без использования, если человек Разрежьте часть этого, если честно, я не очень хорош PS, я мог бы также иметь это усилие с CSS, написанными; Кроме того, говорится с CSS письменными страницами быстрее, эй!
Оглядевшись, все части головы, да, все части, все закругленные прямоугольные элементы. Итак, что нам нужно сделать, это отрегулировать высокие и широкие, подходящие скругления каждого элемента, хорошо поработать над взаимосвязью укладки между слоями и, наконец, макет в правильном положении, даже если он завершен.
2.2.2
Во-первых, в анимации у головы в целом есть действие, поэтому вокруг нее должен быть обернут слой, вот тег .head.
HTML-код выглядит следующим образом:
<div class="head"></div>Кроме того, при позиционировании есть обертывающий слой, который также способствует позиционированию бровей, глаз, носа и т. д., что я считаю весьма удобным. Код css выглядит следующим образом:
.head{
position: absolute;
top: 20px;
left: 50%;
}Абсолютное позиционирование помогает позиционировать голову там, где я хочу, то есть сверху, слева можно установить исходя из этого.
При отображении с центрированием по горизонтали обычно используется значение left:50%;margin-left:-a px; (a равно половине ширины элемента, центрируемого по горизонтали) (или можно использовать правую сторону). Но поскольку мой .head — это просто обертывающий слой, нет необходимости задавать ширину и высоту, поэтому я использую только левое: 50%, это предложение. Откройте инструмент проверки, который поставляется вместе с браузером, и вы увидите, что .head находится немного правее центральной оси и не имеет площади.
2.2.3 На картинке больше всего бросается в глаза большое лицо, которое также является лучшей частью для написания:
HTML-код выглядит следующим образом:
<div class="head">
<div class="face"></div>
</div>Просто позвольте "face" --.face существовать как дочерний элемент .head. Код css выглядит следующим образом:
.face{
position: absolute;
top:75px;
left: 50%;
margin-left: -60px;
width: 120px;
height: 170px;
border-radius: 30px;
background-color: #fff7e5;
}Поскольку .face — это нижний слой заголовка, вы можете не устанавливать свойство z-index. При центрировании .face я использовал вот эту пару хороших знакомых:
left: 50%;
margin-left: -60px;Среди них 60px — это ровно половина ширины: 120px;.
Чтобы сделать подбородок этого парня круглым, я установил border-radius: 30px; на самом деле все четыре угла закруглены, так или иначе, два верхних угла не видны, они покрыты волосами (как у меня, потому что мой у друзей есть челка, им не нужно серьезно рисовать брови, что заставляет нас показывать лоб и каждый день тратить время на то, чтобы сделать брови симметричными. Однако, если ваше обсессивно-компульсивное расстройство тяжелее моего, вы можете просто установить значения border-bottom-left-radius и border-bottom-right-radius, то же самое. Но говорят, что в данном случае вы написали две строчки кода, а с точки зрения оптимизации кода последнее — не лучший выбор!
2.2.4
Затем я подумал добавить волосы, которые я думаю, очень хорошо писать, но в идеале всегда полно... Ведь волосы в форме арки.После создания основного тела, лоб должен быть обнажен. , а на макушке есть потертость.Волосы тусклые, а центр лба должен быть опущен небольшой комочком, и, собственно говоря, перед ушами есть еще небольшие бакенбарды. Боже... В реальной постановке я решил оставить бакенбарды вместо ушей, в конце концов, они относительно близко. , неважно, волосы это или нет, на данный момент, хе-хе.
2.2.4.1 Сначала определите структуру html.
HTML-код выглядит следующим образом:
<div class="head">
<div class="face"></div>
<div class="hair">
<div class="forehead"></div>
<div class="rub-up"></div>
<div class="rub-down"></div>
</div>
</div>В сочетании со структурным анализом только что я установил лоб (.forehead), тусклые волосы (.rub-up) и челку (.rub-down) в метке слоя волос (чуть не забыл по-английски, большая часть это Baidu Да, если что-то не так со словами, пожалуйста, поправьте меня, спасибо!).
2.2.4.2 Сначала основная часть волос.
Код css выглядит следующим образом:
.hair{
position: absolute;
z-index: 9;
top:160px;
left: 50%;
margin-left: -70px;
width: 140px;
background-color: #ffd11a;
}Волосы должны располагаться под бровями и глазами, поэтому значение z-index должно быть меньше, чем брови и глаза, написанные через некоторое время. Но учитывая, что при анимации уши на самом деле выскакивают из-за волос, поэтому, чтобы дать им место, я установил здесь z-index для .hair на 9.
Вот немного об анимации заранее:
В финальном эффекте часть волос отображается снизу вверх, поэтому дана высота и закругленные углы, если они не могут подняться, и все они прописаны в финальном состоянии эффекта анимации, о котором будет сказано позже; ширина не меняется, поэтому ее можно написать здесь первой. Поскольку нет роста, мы не можем видеть волосы сейчас. Но у него нет высоты, поэтому волосы и челку сзади нельзя отобразить, поэтому сначала я добавляю в .hair следующий код:
{
height: 100px;
top:60px;
border-radius: 40px 40px 0 0;
}2.2.4.3 Затем идет лоб.
Код css выглядит следующим образом:
.forehead{
position: absolute;
bottom:0;
left: 50%;
margin-left: -55px;
width: 110px;
height: 65px;
border-radius: 25px 25px 0 0;
background-color: #fff7e5;
}Используйте слой того же цвета фона, что и лицо, поверх слоя, показанного для волос, и установите два верхних закругленных угла, чтобы создать эффект изогнутых волос. Здесь используется метод аббревиатуры: порядок «вверх-вправо-вниз-влево» отличается от аббревиатуры margin и padding, радиус границы равен «верхний левый-верхний правый-нижний правый-нижний левый» (ps: I не используйте больше Саид, его можно найти в Интернете, я просто говорю, что я использую, есть на линии).
2.2.4.4 Тусклые волосы и челка на макушке.
Код css выглядит следующим образом:
.rub-up{
position: absolute;
top: -10px;
left: 50%;
margin-left: -40px;
width: 80px;
border-top-right-radius: 15px;
background-color: #ffd11a;
}
.rub-down{
position: absolute;
top: 25px;
left: 50%;
margin-left: -20px;
width: 40px;
border-bottom-left-radius:20px;
background-color: #ffd11a;
}
.hair,.rub-up,.rub-down{
background-color: #ffd11a;
}Тусклым волосам над волосами нужен только закругленный угол в правом верхнем углу, так что просто напишите border-top-right-radius: 15px, этот подойдет. Следует отметить, что порядок речи отличается от китайского, здесь сначала нужно сказать «вверх/вниз», а затем «влево/вправо». Точно так же челке нужны только закругленные углы в левом нижнем углу, поэтому используется радиус нижней границы слева: 20 пикселей. Эти два волоска анимируются путем изменения высоты и положения. Чтобы проиллюстрировать окончательный результат, я сначала добавил следующий код:
.rub-up{
height: 30px;
transform:rotate(0deg);
}
.rub-down{
height: 30px;
}Наконец, я использовал один и тот же цвет для трех частей волос, чтобы они выглядели как единое целое, очень похоже! Здесь мы используем способ написания нескольких классов CSS вместе: вы можете разделить несколько имен классов с помощью «,» (обязательно используйте английскую запятую!). Фактически, вы также можете написать общее имя класса для каждой метки, которая должна использовать цвет волос, например:
<div class="hair hair-color">
<div class="forehead"></div>
<div class="rub-up hair-color"></div>
<div class="rub-down hair-color"></div>
</div>Затем установите цвет отдельно для этого класса:
.hair-color{
background-color: #ffd11a;
}В этом случае, если вы хотите использовать этот цвет фона позже, просто добавьте этот класс. Я думаю, что с точки зрения оптимизации кода, если его можно использовать легко и максимально семантически, это будет более удобно для написания всего кода и последующей модификации и обслуживания.
2.2.5 По порядку сверху вниз мы будем говорить о бровях, глазах, ушах и рту соответственно. Почему бы не поднять нос? Я думаю, вы уже догадались, я расскажу об этом позже, хе-хе!
2.2.5.1 Сначала определите структуру html.
HTML-код выглядит следующим образом:
<div class="eyebrows">
<div class="brow-left"></div>
<div class="brow-right"></div>
</div>
<div class="eyes">
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
<div class="sockets">
<div class="socket-left"></div>
<div class="socket-right"></div>
</div>
<div class="earsandtemples">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="temple-left"></div>
<div class="temple-right"></div>
</div>
<div class="mouth"></div>Вышеуказанные элементы div (.eyebrows, .eyes, .sockets, .earsandtemples и .mouth) являются дочерними элементами .head, родственными .face и .hair. Как я уже говорил, из-за близкого расположения я написал уши и рога гривы вместе. На самом деле, я изначально хотел написать глаза и темные круги вместе.Угадайте, что я разобрал? Да потому что в анимации глаза моргают и моргают вместе. В то время я думал написать это действие на обертывающем слое, где глаза, и после его написания, окей, темные круги тоже заморгали... Если не веришь в зло, можешь попробовать, эффект отличный... Но сейчас я пишу эту статью.В то время я вдруг подумал, что если бы я писал анимации для каждого глаза в отдельности, то можно было бы написать одно и то же, почему я такой упрямый (прикрываю свой лицо...) Я думаю, это также показывает, что если мы хотим добиться того же эффекта, На самом деле, есть много способов, это и есть удовольствие от написания кода, не так ли?
2.2.5.2
Что касается стиля, начнем с бровей: два прямоугольных дива, и тот, что справа, немного наклонен.
Код css выглядит следующим образом:
.eyebrows{
position: absolute;
z-index: 59;
top:-50px;/*-----动画结束的最终效果是top:120px;*/
left: 50%;
margin-left: -45px;
width: 90px;
}
.brow-left,.brow-right{
width: 30px;
height: 8px;
background-color: #ffd11a;
}
.brow-left{
float: left;
}
.brow-right{
float:right;
transform: rotate(10deg);
}Потому что z-индекс .hair только что: 9; включает в себя лоб, поэтому, если хотят отображаться брови, они должны быть не меньше 9, не меньше, а больше. Так что я поставил 59 здесь тоже можно. Две брови завернуты в один .eyebrows. Пока родительский элемент абсолютно позиционирован и ширина четко указана, две брови можно перемещать слева направо. Я думаю, это очень удобно. Я не знаю, есть ли лучший способ (взгляд знания). Поскольку две брови имеют одинаковый размер и цвет, стили написаны вместе.
Кажется, что бровь справа (должна быть слева от самого парня) нужно наклонить, просто преобразуйте: rotate(Xdeg);, а центр вращения по умолчанию — это точный центр элемента, что и я хочу , я специально не писал стиль преобразования-происхождения.
2.2.5.3
Теперь пришло время поговорить о глазах и темных кругах (можно сказать, что это глазницы...).
Код css выглядит следующим образом:
.eyes{
position: absolute;
z-index: 69;
bottom: -162px;
left: 50%;
margin-left: -35px;
width: 70px;
}
.eye-left,.eye-right{
width: 14px;
border-radius: 7px;
background-color: #264c73;
/*------动画结束的最终效果要加上:*/
height: 22px;
}
.eye-left{
float: left;
}
.eye-right{
margin-left: 56px;
}
.sockets{
position: absolute;
z-index: 59;
top:155px;
left: 50%;
margin-left: -38px;
width: 76px;
}
.socket-left{
float: left;
}
.socket-right{
float: right;
}
.socket-left,.socket-right{
height: 10px;
width: 20px;
border-radius: 0 0 10px 10px;
/*------动画结束的最终效果要加上:*/
background-color: #cc6600;
opacity: 0.1;
}Глаза выше глазниц, поэтому по атрибуту z-index глазницы (59) все же выше (по крайней мере, равны), чем волосы (59), но глаза (69) выше глазниц.
Видя здесь, мы использовали свойство border-radius много раз. Я чувствую, что он может достичь многих форм, это потрясающе! Например, глаза здесь кажутся полукругами сверху и снизу, а прямоугольником посередине, но на самом деле нужно только сделать значение border-radius равным половине ширины. Видя это, если бы Чжэн Юань не понимал, что происходит в начале, его друзья поняли бы, верно? Просто сделайте элементы с закругленными углами одинаковой ширины и высоты! Если ширина и высота несовместимы, это будет иметь эффект, подобный глазам здесь~
Итак, полукруглая глазница тоже очень хороша для письма, верно? Установите только два нижних закругленных радиуса границы:
0 0 10px 10px подойдет.
но!我并没有给眼眶设置初始颜色，所以现在这样是看不到它们的，为了展示效果，这里我先加上。因为在动画效果里，它们是淡出的，所以我直接写在了动画里面，不然的话，嗯，有兴趣的朋友可以自己试试看……
2.2.5.3 Виски и уши, как упоминалось ранее, должны обращать внимание на перекрытие.
Код css выглядит следующим образом:
.earsandtemples{
position: absolute;
z-index:1;
top:160px;
left: 50%;
margin-left:-70px;
width: 140px;
}
.ear-left,.ear-right{
position: absolute;
width: 10px;
background-color: #fff7e5;
}
.ear-left{
border-bottom-left-radius:10px;
}
.ear-right{
border-bottom-right-radius: 10px;
}
.temple-left,.temple-right{
position: absolute;
width: 5px;
/*------动画结束的最终效果要加上:*/
height: 20px;
bottom:-20px;
opacity: 1;
}
.temple-left{
left: 10px;
}
.temple-right{
right: 10px;
}И добавьте эти два имени класса бакенбардов в предыдущее место, где задается цвет волос:
.hair,.rub-up,.rub-down,.temple-left,.temple-right{
background-color: #ffd11a;
}Что здесь интересно, так это то, что все они выходят из волос в положении виска, поэтому установите положение: абсолютное; правильное, чтобы они достигли окончательного эффекта.
2.2.5.3 Рот пишется так же, как и темные круги.
Код css выглядит следующим образом:
.mouth{
position: absolute;
top: 195px;
left: 50%;
margin-left: -25px;
width: 50px;
border-radius: 0 0 25px 25px;
background-color: #fff;
/*------动画结束的最终效果要加上:*/
height: 20px;
}Когда я пишу лоб, закрывающий лицо, он заканчивается над ушами, поэтому для рта можно не указывать z-индекс.
2.2.6 Теперь у головы отсутствует только тень, которая занимает половину лица, и нос, который появляется вместе с ней. Я написал их вместе. Да или потому, что локация близко, вот я и написал нос сюда! Друг, ты угадал?
HTML-код выглядит следующим образом:
<div class="shadowandnose">
<div class="shadow"></div>
<div class="nose"></div>
</div>Здесь .shadowandnose также является дочерним элементом .head. Код css выглядит следующим образом:
.shadowandnose{
position: absolute;
z-index: 79;
top:75px;
left: 50%;
margin-left: -60px;
width: 120px;
}
.shadow{
width: 60px;
height: 170px;
border-radius: 30px;
/*------动画结束的最终效果要加上:*/
opacity: .1;
background-color: #555;
}
.nose{
position: absolute;
left: 50%;
top:50%;
margin-top:-5px;
height: 30px;
border-top-left-radius: 15px;
background-color: #fff7e5;
/*------动画结束的最终效果要加上:*/
width: 15px;
margin-left: -15px;
}Z-индекс .shadowandnose должен быть больше или равен 69. Здесь я установил его на 79. Кроме того, поскольку тег .nose пишется после .shadow, по умолчанию он будет находиться на верхнем слое, поэтому атрибут z-index не может быть записан. Наоборот, если вы меняете порядок этих двух ярлыков, вы должны их написать, а те, кому интересно, могут попробовать.
Кроме того, верхняя часть головы должна выходить за круглую границу, поэтому div, в котором находится вся голова, то есть .head, не может быть обернут в .bg-circle, а его z-индекс выше . бг- круг. Поэтому я установил их как одноуровневые элементы, и из-за z-индекса предыдущего .bg-circle: 0 .head может отображаться над ним, даже если z-индекс не установлен.
На данный момент голова мальчика в основном завершена, и есть небольшой объем кода, который необходимо написать, прежде чем действие можно будет полностью отразить, но я также сначала написал все это!
2.3
тело персонажа
2.3.1 По сравнению с упомянутой выше головой, часть тела персонажа проще. Сначала поговорим о черной футболке.
HTML-код выглядит следующим образом:
<div class="bg-circle">
<div class="bg"></div>
<div class="shirt"></div>
<div class="shadow-left"></div>
<div class="shadow-right"></div>
</div>Поскольку он имеет некоторые перекрывающиеся отношения с двумя тенями, я также написал его как дочерний элемент .bg-circle. Код css выглядит следующим образом:
.shirt{
position: absolute;
z-index: 39;
bottom: -10px;
left: 50%;
margin-left: -90px;
width: 180px;
background-color: black;
}Здесь у меня будет черная футболка поверх светлого оттенка и под темным оттенком. При написании светлых теней я не указал значение z-индекса, поэтому для черной футболки нужен только z-индекс больше 0; для темных теней я написал z-индекс: 59, поэтому черная футболка меньше 59. . Однако, учитывая, что на черной футболке еще есть несколько слов, z-index нельзя ставить слишком высоко, поэтому здесь я поставил z-index: 39.
2.3.2 Буквы на этих футболках появляются в анимации одна за другой, поэтому я выписываю их по отдельности.
HTML-код выглядит следующим образом:
<div class="bg-circle">
<div class="bg"></div>
<div class="shirt"></div>
<div class="logo">
<div class="i">I</div>
<div class="love">♥</div>
<div class="c">C</div>
<div class="s1">S</div>
<div class="s2">S</div>
</div>
<div class="shadow-left"></div>
<div class="shadow-right"></div>
</div>На этом структура .bg-circle завершена! Код css выглядит следующим образом:
.logo{
display: flex;
justify-content: space-around;
position: absolute;
z-index: 49;
left:50%;
bottom:-35px;
margin-left:-60px;
width: 120px;
height: 105px;
color: #fff;
font-size: 22px;
font-weight: bold;
}
.love{
color:red;
}
.i,.love,.c,.s1,.s2{
margin-top:100px;
/*------动画结束的最终效果要加上:*/
margin-top:25px;
}Чтобы было проще сохранять эти буквы на одинаковом расстоянии друг от друга, я использовал свойство display: flex; и установил свойство justify-content: space-around;, чтобы сделать расстояние с обеих сторон каждого элемента одинаковым и оставить на обоих концах пространство. На самом деле, если я изменю его и установлю для параметра justify-content значение space-between, эффект будет таким же.
Это предостережение было скопировано с веб-страницы дела, я не знаю, как его напечатать (/ω＼).
Эти буквы на черной футболке и могут быть закрыты темными тенями, поэтому здесь я установил z-index: 49.
2,4
Эти две шаткие заметки написать еще лучше. Если вам не нужна анимация, просто сделайте так, чтобы она отображалась по всей центральной части, и все готово.
HTML-код выглядит следующим образом:
<div class="notes">
<div class="note2"><img src="note2.png"></div>
<div class="note1"><img src="note1.png"></div>
</div>По той же причине, что и для head.head, если вы хотите отобразить в круглой области .bg-circle, он должен быть родственным ему элементом, и из-за настройки .bg-circle{z-index:0;}, здесь его можно опустить.Запишите z-индекс .notes. Код css выглядит следующим образом:
.notes{
position: absolute;
left: 50%;
margin-left:-170px;
width: 340px;
}
.note2{
float: left;
margin-left: 30px;
opacity: 0;
}
.note1{
float: right;
margin-right: 30px;
opacity: 0;
}Мне не нужно ничего говорить, но некоторые люди могут спросить, какова цель установки opacity: 0? Честно говоря, уже полмесяца, как я сам это написал, и я в шоке (◎_◎;). Я вернулся, попробовал и обнаружил, что дело оказалось именно в этом: поскольку анимация этих двух нот имеет значение задержки, она не начинает раскачиваться при их появлении, и им приходится ждать действия на лицом к финишу, поэтому они находятся в режиме ожидания. , вы должны быть невидимыми, подождать, пока вы не захотите, чтобы они появились, а затем показать их в эффекте анимации. Чтобы проиллюстрировать проблему, я просто взял случайное значение их движения и добавил его, чтобы увидеть, где они находятся. код показывает, как показано ниже:
.note1,.note2{
transform: rotate(0deg);
opacity: .7;
margin-top:-150px;
}2.5 здесь, не закончено. Я не знаю, помните ли вы еще, есть четыре желтых кольца, которые появляются в один, только один раз?
HTML-код выглядит следующим образом:
<div class="rounds">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
<div class="round4"></div>
</div>.rounds также родственны .bg-circle, поэтому на них не влияет over-flow:hidden .bg-circle, и они расположены под волосами и примечаниями. Код css выглядит следующим образом:
.round1,.round2,.round3,.round4{
position: absolute;
top:76px;
left: 50%;
margin-left: -124px;
border-radius: 50%;
background-color: transparent;
}Если только написано, как указано выше, они невидимы. Я все еще беру значение процесса в их анимацию и позволяю кругу выйти и сказать это:
.round1{
border:1px solid #ffd11a;
width: 240px;
height: 240px;
transform: scale(1.2);
}Может быть, это просто личная привычка, я написал слой-оболочку .rounds, но на самом деле это не стиль. Пробовал удалять, на результат не повлияло. Теперь кажется, что обертывание слоев действительно полезно только тогда, когда я хочу свернуть содержимое частей. Сейчас я мало что понимаю, поэтому буду добавлять и исправлять, когда у меня появятся новые идеи в будущем.
Еще один момент весьма интересен. Если вы напишите текущий стиль в .rounds вместо того, чтобы определять эти .roundX отдельно, это будет производить очень волшебные эффекты. Я думаю, что эти попытки также помогут новичкам понять реализацию эффектов css. Заинтересованные друзья могут попробовать это. пытаться.
Вы не можете прочитать код, вы можете узнать его, только набрав. Я думаю, то же самое относится и к другим вещам. (Профессиональное заболевание, может поздно, может не вылечиться...)
3. Реализовать анимацию
3.1 Ссылаясь на случай, запишите эффект анимации и порядок появления каждой части.
Я использовал относительно глупый метод в то время, используя небольшой блокнот, обновляя страницу снова и снова, чтобы увидеть, какое действие появилось первым, затем какое, какой эффект имело каждое действие, и были ли другие действия, появившиеся в то же время. в то же время. Но ведь это зависит от расчетной разницы во времени и разных ракурсов, поэтому в высокой степени восстановить не получится. В противном случае мне, возможно, придется использовать более земные приемы, такие как таймер или что-то в этом роде (/ω＼).
Ниже представлена временная шкала, которую я записал, или карта процесса?
Начинать
-->[Большой круг с синим фоном (отображается-крупнее-нормально, 0,8 с)+черный T (отображается-крупнее-нормально, 1 с)]+лицо (увеличивается-нормально, 0,5 с, запаздывание на 1 с)
-->[волосы основного тела (снизу вверх, 0,8 с, в конце 1,5 с) + бакенбарды (0,4 с, в конце 2,3 с)]
--> Верхние волосы (0,6 с, позднее 2,3 с)
--> Ухо (0,4 с, позднее 2,9 с)
--> Лю Хай (0,4 с, позднее 3,3 с)
-->{[появляются глаза (0,5 с, поздно 3,7 с)]+ глазницы (0,3 с, поздно 3,7 с)+[брови (0,4 с, поздно 3,7 с), правые брови (3 с, поздно 2,5 с)]}
--> Рот (0,5 с, позднее 4,2 с)
--> Letter (1s, поздние 4s+)
-->[Тень с обеих сторон (5.7с, задержка прописана в анимации) + четыре круга (1с+, поздняя 5с+) + силуэт лица (0.5с, поздняя 4.7с) + нос (0.5с, поздняя 4.7с) + тряска головой (1 с, поздно 5,2 с) + мигание (5 с, поздно 5,2 с)]
-> Примечание (2S, поздний 5S +).
На самом деле, эта часть самая трудоемкая, как мне кажется. Запись была очень трудоемкой в то время, а сейчас писать - безнадежный долг... Но всегда лучше записать или записать, чтобы сформировать что-то вроде плана или временной шкалы, а не смотреть на это и делать это немного.
3.2
сделать анимацию
3.2.1 Основные операции:
После планирования написать анимационные эффекты на самом деле проще всего! Во-первых, давайте возьмем этот круг в качестве примера:
.bg-circle{
/*这部分代码前面写过了，此处略过*/
animation: bigger .8s forwards linear;
}
@keyframes bigger{
0%{height: 200px;width: 200px;margin-top: 40px;}
75%{transform: scale(1.0,1.0);}
100%{transform: scale(0.8,0.8);margin-top: 0;}
}В стиле элемента, к которому должен быть написан анимационный эффект, добавьте анимацию:...; (здесь я использую сокращенный метод, и каждый анимационный эффект также можно написать отдельно, чего можно найти много на Интернет я систематически не перечисляю).
в:
Первый атрибут (большего размера) — это имя анимации, которую я хочу вызвать, то есть имя-анимации;
Второй атрибут (.8s, или пишется как 0.8s) — это время, необходимое для завершения анимации.Если ее нужно воспроизвести несколько раз, это время — это время каждого цикла, то есть анимация-длительность;
Третий атрибут (вперед) указывает, в каком стиле существует элемент после завершения анимации, то есть в режиме анимации-заполнения. Вперед — это сохранение конечной позы после завершения анимации, не двигайтесь. Значений для этого свойства еще много, другими пока не пользовался, так что больше сказать не осмелюсь;
Четвертый атрибут (linear) предназначен для установки кривой скорости этого действия, а именно animation-timing-function, что является очень полезным атрибутом. Линейное значение, которое я установил здесь, — это скорость от начала до конца. Я также использовал легкость позже, эффект медленно-быстро-медленно очень естественен. Это свойство также имеет много значений, пробуйте больше и лучше приступайте к работе в будущем.
Поскольку я сам пользуюсь браузером Chrome, браузеросовместимого упражнения пока нет (если столкнусь в будущем, напишу отдельно). Так что используйте @keyframes напрямую
big{...} для определения анимации.
В @keyframes youranimation{...} сказано, что лучше всего устанавливать значения от/0% до/100%. У меня нет исследований по этим двум методам написания, и у меня нет проблем ни с одним из них. Другие значения процесса можно ставить произвольно, не зацикливаясь на 50%, 75% и т.д. Я поставил 88% для отладки, и это нормально. Но если не надо, если эффект похож, то можно не использовать анимацию-длительность, умноженную на 88%, чтобы рассчитать для себя время каждого действия.
3.2.2 Упрощенный код:
3.2.2.1
Иногда элементу нужно задать два действия, например глазам: в начале сцены его нужно увеличить, а потом вернуть к нормальному размеру, а затем, когда появятся все предметы на лице, движением встряхивания голова, глаза будут моргать. . Кроме того, нам также нужно заставить это действие ждать некоторое время перед запуском, что часто называют задержкой. В это время эффект действия можно записать следующим образом:
.eye-left,.eye-right{
/*这部分代码前面写过了，此处略过*/
animation:openeyes 0.5s 3.7s forwards,wink 5s 5.2s infinite;
}
@keyframes openeyes{
0%{}
75%{height: 33px;width: 21px;opacity: 0.4;border-radius: 0;}
100%{height: 22px;}
}
@keyframes wink{
0%,90%{height:22px;}
95%{height: 0;}
100%{height:22px;}
}Для одного и того же элемента, когда необходимо задать два действия, они должны быть записаны в одной анимации, разделенной знаком «,». Если вы напишите две анимации:...; последняя перезапишет первую, что эквивалентно записи только одной.
Кроме того, в каждой группе сокращенной анимации есть два значения времени:...;, не волнуйтесь, браузер сам понимает, первое - это длина цикла анимации, а второе - время задержки, т.е. , анимация- задержка. Сначала я переживал, не возникнет ли недоразумений, и настаивал на том, чтобы написать их отдельно. Позже я обнаружил, что в Интернете есть примеры, которые являются стенографическими, поэтому я изменил свой код на этот. Ведь ради оптимизации кода сохранение строки есть строка!
3.2.2.2
В @keyframes youranimation{...} также можно использовать сокращение. Если в этом действии есть несколько моментов времени, имеющих одинаковый эффект, их можно записать вместе.Например, в предыдущем абзаце при написании действия подмигивания я прямо пишу 0% и 90% как один и тот же эффект, т.е. эквивалентно Использовать 90% всего процесса анимации в качестве задержки для завершения.
Другой пример, когда я писал глупую анимацию:
@keyframes upper{
0%,90%,100%{transform-origin: 80% 100%;}
0%{height: 0;top:5px;transform:rotate(-5deg);}
90%{height: 30px;transform:rotate(10deg);}
100%{height: 30px;transform:rotate(0deg);}
}В моем коде такое использование встречается довольно часто. 3.2.2.3 В другом случае, когда несколько элементов вызывают предустановленную анимацию одновременно, нам нужно только сделать некоторую тонкую настройку, чтобы эти элементы имели разные эффекты. Как те четыре кольца, которые расширяются от центра, помните?
.round2{
animation:rd2 .8s 5.6s forwards;
}
.round3{
animation:rd2 .8s 5.7s forwards;
}
.round4{
animation:rd2 .8s 5.8s forwards;
}
@keyframes rd2{
0%{border:2px solid #ffd11a;width: 240px;height: 240px;}
90%{border:1px solid #ffd11a;width: 240px;height: 240px;transform: scale(1.3);}
100%{opacity:0;}
}Я сделал здесь относительно немного изменений, но задержка каждого кольца разная, и текущий эффект достигается. При случае попробую другие варианты, интересно!
4. Вывод
Когда я планировал делать упражнения по чужим кейсам, то в душе отказался... Ведь у меня никогда не было опыта перемещения CSS. Но я подумал то же самое, когда впервые столкнулся с флексом. Хотя я не могу сказать, насколько я опытен сейчас, но после того, как я использовал его несколько раз, я, по крайней мере, знаю, что может сделать flex, и где найти ответ, если он не работает. Я считаю этот процесс очень важным. Вот и в этот раз я тоже подбодрила себя и сказала себе, что у меня получится!
В процессе его создания мы столкнулись со многими проблемами, особенно с проблемой позиционирования. Таких сложных отношений позиционирования я еще не испытывал, собственно, с этого момента я вижу, насколько плох мой фундамент... Но я всегда спрашиваю себя: другие могут это сделать, из-за чего? Это потому что он гений? Или это потому, что ему приснился сон? Если нет, то другие немного учатся, и я тоже. Я могу быть медленнее, и я могу вообще не справиться, но я всегда могу учиться, и это лучше, чем останавливаться, когда я вижу трудности. Итак, каждый раз, когда вы сталкиваетесь с чем-то, чего не понимаете, проверяйте учебник в Интернете, чтобы узнать, не задает ли кто-нибудь вопрос, и посмотрите ответы других людей. Если вы действительно этого не понимаете, просто прочитайте медленно; если вы снова не понимаете, напишите весь код, удаляя по одному предложению за раз, и посмотрите, какое предложение работает, и есть ли несколько предложений, которые работают. вместе . В этом процессе я обнаружил, что очень эффективно использовать инструмент проверки, который поставляется вместе с браузером.
После того, как я закончил писать все это в то время, мне потребовалось много времени, чтобы расслабиться, и я чувствовал, что я довольно талантлив! Это как идти через гору! Это не заняло много времени, на следующий день я начал изучать jQuery, прочитал книгу и написал корпус большой вертушки. Потом я вспомнил, что эти вещи не могут быть закончены, и я должен сделать резюме, иначе я обязательно забуду их в будущем! Это будет только через неделю или две.Когда я вернулся, чтобы написать эту статью сегодня, у меня было несколько мыслей: Что я думал в то время? Что в этом сложного? Почему порядок этих кодов такой странный? Я чувствую, что это показывает, что я действительно делаю успехи, а также показывает, что, если я не буду вести записи, я постепенно забуду то, что, как мне казалось, никогда не забуду.
Забыл как найти, значит код css надо писать в определенном порядке, позиции, размере, тексте, фоне и других. Когда я писал эту статью, я понял, что на тот момент я действительно помнил, что писать, и нет так называемого порядка. Кроме того, есть много избыточного кода, который не работает и может быть следами неудачной отладки. В этой отделке я внес изменения все вместе.
Когда я увидел, как другие технологические гиганты пишут о своем собственном опыте, я написал, что мне потребуется время, чтобы сделать такое резюме. Ради имени можно усилить внимание, для себя это еще и процесс дальнейшего усвоения полученных знаний. Вы должны уметь успокаиваться и накапливать собственные мысли. Самоанализ — это тоже практика. Вдохновленный этим, я стиснул зубы и заставил себя сделать то же самое.
Честно говоря, мысль начать эту статью вызвала у меня головную боль. Чтобы сбежать, я даже начала находить себе другие дела, так что чувствую, что мне некогда. Но тогда я все еще смотрю на себя, не бегу, я могу пробежать первый день первого года, но не пятнадцатый. Подумай, зачем ты лжешь себе? Когда я действительно начал этим заниматься, я постоянно ощущал важность этого и пользу, которую это приносило мне. Самый прямой и жестокий аспект — это разбивать свои прежние недостатки и пороки перед своими глазами один за другим: это то, что вы считаете себя хорошим, это так называемое вы сделали? ! Но, к счастью, я первый вижу эти недостатки, разве не приятно? Это лучше, чем с радостью показывать результаты другим, а потом быть критикованным ни за что.