Анимированные рамки для блоков на CSS

Используя данную анимацию на бордюрах, можно сконцентрировать внимание посетителя на определенных блоках.

Вариант 1:

Вариант с изменяющимся свойством border-radius. Он имеет заданную ширину и длину, поэтому их стоит подгонять под размер расположенного в нем контента.

Рамка 1

Вариант 2:

Рамка с бегущими полосками. Данный блок также имеет заданную ширину и высоту.

Рамка 2

Вариант 3:

Блок с плавающим бордюром и ховер-эффектом. Он, как и предыдущие, имеет заданную ширину и высоту.

Рамка 3

Вариант 4:

Вариант очень похожий на предыдущий.

Рамка 4

Вариант 5:

Эта рамка может иметь не 2 цвета, как на примере, а 4. А еще можно получить интересный эффект убрав overflow: hidden

Рамка 5

Вариант 6:

Однократная обводка блока рамкой при наведении

Рамка 6

Вариант 7:

Вариант с большой рамкой и ховер-эффектом

Рамка 7

Смотрите также:

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

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • SOME:

    Я захотел объединить две рамки:
    Одна радужная рамка с анимацией-градиентом и "рамка 1" и добавить последнюю рамку для контура И ПОЛУЧИЛОСЬ ОЧЕНЬ КРАСИВО:

    html
    head
    title ПРИКОЛЬНАЯ РАМКА /title
    style
    .block {
    	padding: 20px 30px;
    	font-size: 20px;
      font-family:"arial black";
      color: #ffffff;
    	border-radius: 8px;
    	position: relative; 
      animation: anim-ramka-1 10s infinite;
      border: 3px solid #232323;
    }
    .block:after {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	border-radius: 8px;
    	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    	z-index: -1;
    	animation: blockanimate 5s ease alternate infinite;
    	background-size: 300% 300%;
    	clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
    }
     
    @keyframes blockanimate {
    	0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    		background-position: 0% 50%;
    	}
      25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
      }
    	50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
    		background-position: 100% 50%;
    	}
    	100% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    		background-position: 0% 50%;
    	}
    }
    /style
    div class="block"
      ПРИКОЛЬНАЯ РАМКА :)
      /div

    Держите код если что 🙂и в выделенных местах поставьте скобки!

    Ответить
    • SOME:

      извините но жирный шрифт не сработал поэтому поставьте в:
      html
      head
      title
      style
      div class="block"

      просто сайт не принимает скобки 🙁

      Ответить
      • Alexander:

        Скиньте плиз полностью CSS-код.
        У меня не получилось сделать рамку как она была вами задумана (только градиент фона)
        Сайт принимает скобки, а вот теги не все (скрипт, хтмл, титле, стиль), а они и не нужны.
        Я потом отредактирую комменты

        Ответить
  • Евгений Андреевич:

    Круто!!))

    Ответить
  • СЕРГЕЙ:

    Класс! Я из первого варианта кнопку на звонок сделал!)))

    Ответить
  • Lean:

    Как рамку растянуть на 100%?

    Ответить
  • Витя:

    Как можно сдвинуть её влево?

    Ответить
    • Alexander:

      Изменить margin, убрать или заменить оттуда auto

      Ответить
  • Сергей:

    Рамка 7 не двигается на старых телефонах подскажите почему или сбросьте код рабочий пожалуста

    Ответить
    • Сергей:

      И не корректно отображается . со здвигом как будто flex не работает((((

      Ответить
      • Alexander:

        Пробовать надо, если flex убрать, то удаляем:

        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;  

        Ставим центр и нужный padding:

        text-align: center;
        padding: 60px 10px

        А сюда добавляем:

        .ramka-7:after, 
        .ramka-7:before {
        	left: -45px;
        	top: -45px;
        }
        Ответить
        • Сергей:

          Да спасибо все заработало я ещё -webkit- добавил и ок спасибо огромное

          Ответить
        • СЕРГЕЙ:

          Уже всё получилось! Спасибо!

          Ответить
  • Антон:

    Спасибо! Очень помогла информация.

    Ответить
  • Никита:

    А как мне поменять цвет и почему то рамку вообще почти невидно там буквально меньше пикселя

    Ответить
    • Alexander:

      Цвет задается в хексе, например #BFE2FF или #337AB7, а почему не видно рамку, это смотреть нужно.

      Ответить
  • Галина:

    Отличные примеры!

    Ответить
  • Сергей:

    Классная статья! Спасибо!

    Ответить
  • Серафима Хакимова:

    Довольно таки интересные рамки!А как вставить фото в рамку?

    Ответить
    • Alexander:

      Вместо слова рамка 🙂
      А дальше посмотреть, что получится и подогнать при необходимости

      Ответить