<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

Помимо самих уроков Вы так же получаете и множество упражнений. По сути, Вы создадите свои собственные 20 небольших проектов, благодаря чему у Вас появится и практика, и портфолио.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Движение фоновой картинки внутри рамки

Движение фоновой картинки внутри рамки

Медленно движущаяся картинка в сферической рамке смотрится очень завораживающе. Эта сказочная анимация выглядит дорого, хоть и сделана на чистом CSS.

HTML разметка

<div class="planet planetEarth">
    <div class="container">
        <div class="earth"></div>
    </div>
</div>

CSS код

Создадим космический фон для планеты.

* {
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/* ширина элемента без учета рамок, полей*/
}
body{
    display: flex;/*подключение flexbox*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на всю высоту экрана*/
    overflow: hidden;/*спрятать переполнение*/
}
.planetEarth{
    position: relative;/*относительное позиционирование*/
    min-width: 60%;/*минимальная ширина фона*/
    height: 100vh;/*на всю высоту экрана*/
    display: flex;/*flexbox контейнер*/
    justify-content: center; /*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    background: #182357;/*цвет фона*/
}


Движение фоновой картинки внутри рамки.

Изобразим планету "Земля".

.earth{
    position: absolute;/*абсолютное позиционирование*/
    width: 340px;/*ширина сферической окружности*/
    height: 340px;/*высота сферической окружности*/
    background: #f00;/*цвет размытого фона вокруг планеты*/
    border-radius: 50%;/*закругление углов у блока*/
    background: url(planet.jpg);/*картинка планеты*/
    background-size: cover;/*пропорционально растянутая фоновая картинка*/
    animation: earth 20s linear infinite;/*имя, продолжительность, характер и непрерывность анимации*/
    box-shadow: inset 0 0 20px #03A9F4,/*размытая рамка с помощью теней*/
        0 0 120px #03A9F4;
}
.planet .container{
    width: 100%;/*обнуление отступов*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    -webkit-box-reflect: below 1px linear-gradient(#0001,#0002);/*зеркальное отражение элемента*/
}


Движение фоновой картинки внутри рамки.

Создадим анимацию движения планеты. CSS свойство background-position устанавливает начальную позицию для фоновой картинки. Поэтому достигнув позиции 162% на последнем кадре, изображение возвращается на исходные позиции и начинает движение заново.

@keyframes earth
{
    0%/*первый кадр*/
    {
        background-position: 0;
    }
    100%/*последний кадр*/
    {
        background-position: 162%;
    }
}

Посмотрите пример на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.