<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Анимация рамки на CSS

Анимация рамки на CSS

К рамке любого элемента на странице может быть применена CSS анимация. На этом уроке мы создадим keyframe анимацию рамки.


HTML разметка

Все элементы поместим в контейнер и зададим блоку container отступы от верхнего и нижнего края браузера. Растянем фоновую картинку на весь блок background-img. Поверх слоя с фоновым изображением нарисуем квадрат с рамкой box.

Зачем так много пустых тегов span? Дело в том, что анимация будет применяться не к самой рамке квадрата, а к псевдоэлементу before тега span. Каждый span соответствует одной стороне квадрата.

<div class="container">
    <div class="bg-img">
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="content">
            <h2>All you need is love </h2>
            <p>When you’re not in love, you are not alive.</p>
            </div>
         </div>
    </div>
</div>

CSS код


// Отступы от края браузера
.container{
    padding-top: 30px;
    padding-bottom: 30px;
}

// Фон и шрифт для всей страницы
body{
    font-family: cursive;
    background-color: #111845;
}

CSS свойства для фоновой картинки


.bg-img{
    background-image: url("https://cdn.pixabay.com/photo/2020/04/06/02/29/love-5008071_1280.jpg");
    height: 480px;
    width: 640px;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 6% auto;
    border: 1px solid #2a3cad;
    position: relative;
}

Анимация рамки на CSS.

CSS свойства для блока с рамкой


.box{
    top: 60%;
    left: 55%;
    transform: translate(-49%, -37%);
    width: 290px;
    height: 290px;
    background: #111845;
    box-shadow: 1 19px 50px rgb(23, 32, 90);
    border: 2px solid #2a3cad;
    color: white;
    padding: 10px;
}

Анимация рамки на CSS.

Красная рамка для контента

Эта рамка не будет анимироваться. Она служит для дополнительного обрамления текста цитаты.

.box .content{     top:14px;
    left:14px;
    right:14px;
    bottom:14px;
    border:1px solid #f66f9d;
    padding:20px;
    text-align:center;
    box-shadow: 0 6px 10px rgba(9,0,0,0.5);
}

Анимация рамки на CSS.

Заготовка для рамки

Рисуем квадрат, трансформируя на нужный угол поворота рамку у каждого тега span.

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box span:nth-child(1){
    transform:rotate(0deg);
}

.box span:nth-child(2){
    transform:rotate(90deg);
}

.box span:nth-child(3){
    transform:rotate(180deg);
}

.box span:nth-child(4){
    transform:rotate(270deg);
}

Рамка для анимации

Самым верхним слоем у всех тегов span, нарисуем при помощи псевдоэлемента before светло-голубую рамку и зададим ей свойство animation со следующими значениями: название, продолжительность, функциональность и повтор анимации.

.box span:before {
    content: '';
    width: 100%;
    height: 2px;
    background: #c7eef1;
    animation: animate 4s linear infinite;
}

Ключевые кадры анимации keyframe

В ключевых кадрах @keyframes задаются CSS правила для каждого из них.

@keyframes animate {
    0% {
        transform:scaleX(0);
        transform-origin: left;
    }
    50% {
        transform:scaleX(1);
        transform-origin: left;
    }
    50.1% {
        transform:scaleX(1);
        transform-origin: right;
    }
    100% {
        transform:scaleX(0);
        transform-origin: right;
    }
}

CSS свойство transform-origin задает местоположение точки, относительно которой происходит масштабирование рамки по оси X.

Анимация рамки на CSS.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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