Хочешь уверенно проходить IT-интервью?
Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.
💡 Почему Т1 тренажёр — это мастхэв?
- Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
- Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
- Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.
Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!
Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy
Бьющееся сердце на CSS ко Дню святого Валентина или просто без повода. Простая открытка с глубоким смыслом на чистых и незамутненных стилях.
CSS – очень простой язык с большим потенциалом. Если вы хоть самую малость разбираетесь в геометрии, то легко сможете превратить окно браузера в холст для собственных шедевров.
Хватит применять CSS только для работы. Используйте его в личных целях без всякого смущения! Сделайте хотя бы простую, но симпатичную валентинку для дорогого человека.
Создаем
Как сделать сердце на CSS из простейших геометрических фигур? Очень просто: достаточно двух кругов и одного квадрата, повернутого на 45 градусов.
В CSS мы легко можем обойтись одним контейнером – привлечем к делу псевдоселекторы :before и :after. Это псевдоэлементы, которые вроде есть, но нет. В HTML и DOM вы их не найдете, но если добавить стили, то на странице они появятся. :before вставляется перед контентом блока, а :after – после.
Таким образом, в HTML мы имеем один элемент:
<div class="heart"></div>
А CSS вот такой:
.heart {
display: inline-block;
height: 50px;
width: 50px;
margin: 0 10px;
position: absolute;
left: 45%; top: 45%;
background-color: red;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
Сам блок с классом heart – это квадрат, повернутый на 45 градусов против часовой стрелки с помощью свойства transform. Псевдоэлементы :before и :after – такие же квадраты, однако углы у них скруглены на 50%, поэтому выглядят они как круги. Взаиморасположение элементов обеспечивается с помощью абсолютного позиционирования.
Оживляем
Влюбленное сердце должно пылко биться, поэтому давайте добавим жизнь в наше творение.
На помощь спешит CSS-правило @keyframes, в котором можно определить один цикл анимации.
Нужно разделить все действие на отдельные шаги (занимающие определенный процент общего времени) и для каждого описать необходимую трансформацию. У нас будет 3 шага.
@keyframes heartbeat {
0% {
transform: scale( 1 );
}
20% {
transform: scale( 1.25 )
translateX(5%)
translateY(5%);
}
40% {
transform: scale( 1.5 )
translateX(9%)
translateY(10%);
}
}
- Начинается все (0%) без трансформаций.
- На 20% от общего времени фигура достигает 125% от исходного размера.
- К 40% она увеличивается до 150%.
- Оставшиеся 60% времени происходит постепенное уменьшение до первоначального состояния.
Запустим наше сердце с помощью правила animation:
.heart {
animation: heartbeat 1s infinite;
...
}
Это сердце на CSS будет биться вечно (infinite) – или столько, сколько длится ваша любовь :)
See the Pen
Audio Element by @dkiriakakis
on CodePen.
Желаем вам прекрасного Дня святого Валентина!
Оригинал: How to create a beating heart with pure CSS for your valentine
Комментарии