5 вариантов красивых анимированных рамок с использованием CSS

Привет, друзья. Красивые анимированные рамки для блоков div всегда привлекают внимание читателей. Вы можете оформить на странице в такую рамку текст или картинку.
В своё время я уже писала статьи про такое оформление.
Вы можете посмотреть, если пропустили как создать эффект появления рамки , или просто красивые рамки для изображений в блоге, или рамка с эффектом веера.

анимированные рамки

Сегодня поколдуем и ёщё сделаем 5 вариантов красивых анимированных рамок с использованием CSS. Все предложенные коды имеют заданную ширину и высоту, цвет, размер шрифта. Если вам вариант подходит сразу копируйте нужный код. При необходимости, вы сможете их поменять на нужные стили. Воспользуйтесь этим редактором.

Давайте смотреть


Рамка 1.

Рамка 1


Код

<div class="ramka-1">Рамка 1</div>

<style>

.ramka-1 {
    position: relative;
    z-index: 0;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;   
}
.ramka-1::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #EF6C00;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2), linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2);
    animation: anim-ramka-1 4s linear infinite;
}
.ramka-1::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
}
@keyframes anim-ramka-1 {
    100% {
        transform: rotate(1turn);
    }
}</style>


 Рамка 2. Большая рамка с ховер-эффектом.

Рамка. Вариант 2

Код

<div class="ramka-2">Рамка. Вариант 2</div>
<style>
.ramka-2{
    width: 200px;
    height: 200px;
    background-color: #FFF;
    position: relative;
    margin: 60px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);
}
.ramka-2:after,
.ramka-2:before {
    mix-blend-mode:multiply;
    filter:none;
    z-index: -1;
    content:'';
    width: calc(100% + 90px);
    height: calc(100% + 90px);
    position: absolute;
    animation: anim-ramka-2 8s ease-in-out infinite;
}
@keyframes anim-ramka-2 {
    0%, 100% {
        clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
    }
    50% {
        clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
    }
}
.ramka-2:after{
    animation-delay: -5s;
    background-color: #00796B;
    clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
}
.ramka-2:before {
    background-color: #B2DFDB;
    clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
}
.ramka-2:hover:after{
    animation-delay: 1s;
}
.ramka-2:hover:before,
.ramka-2:hover:after {
    animation-duration: 2s;
}
</style>


Рамка 3. Рамка с фиксированным бордюром и плавающей вокруг ещё рамкой.

Рамка. Вариант 3


Код

<div class="ramka-3">Рамка. Вариант 3</div>
<style>
.ramka-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 30px auto;
    width: 200px;
    height: 200px;
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: inset 0 0 0 2px #1B5E20; 
}
.ramka-3::before,
.ramka-3::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 6px #EF6C00;
    animation: anim-ramka-3 8s linear infinite;
}
.ramka-3::before {
    animation-delay: -4s;
}
.ramka-3:hover::after,
.ramka-3:hover::before {
    background-color: #EF6C00;
}
@keyframes anim-ramka-3 {
    0%, 100% {
        clip: rect(0px, 220px, 6px, 0px);
    }
    25% {
        clip: rect(0px, 6px, 220px, 0px);
    }
    50% {
        clip: rect(218px, 220px, 220px, 0px);
    }
    75% {
        clip: rect(0px, 220px, 220px, 218px);
    }
}</style>


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


Рамка. Вариант 4

Код

<div class="ramka-4">Рамка. Вариант 4</div>
<style>
.ramka-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    margin: 30px auto;
    border: 8px solid #00C853;
    background: #FFF;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(208,255,0,255);
    animation: anim-ramka-4 10s infinite;
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;
}
@keyframes anim-ramka-4 {
    0% {
        border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
        box-shadow: 15px 15px 50px rgba(208,255,0,255);
    }
    25% {
        border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
        box-shadow: -10px -5px 50px rgba(208,255,0,255);
    }
    75% {
        border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
}
</style>


Рамка 5. Бегущие строчки.


Рамка 5

Код

<div class="ramka-5">
Рамка 5</div>
</div>
<style>
.ramka-5-wr {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
    overflow: hidden;
    margin: 30px auto;

.ramka-5-wr .ramka-5 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Roboto Condensed', sans-serif;   
}
.ramka-5-wr::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: repeating-linear-gradient(
        #FFF 0%,
        #FFF 7.5px,
        #FF8A65 7.5px,
        #FF8A65 15px,
        #FFF 15px,
        #FFF 22.5px,
        #FF8A65 22.5px,
        #FF8A65 30px);
    transform: translateX(-20%) translateY(-20%) rotate(-45deg);
    animation: anim-ramka-5 20s linear infinite;
}
.ramka-5-wr .ramka-5 {
    position: relative;
    background-color: #FFF;
    flex-direction: column;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    font-family: sans-serif;
    z-index: 2;
}
.ramka-5-wr,
.ramka-5-wr .ramka-5 {
    box-shadow: 0 0 2px #FF7043, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
@keyframes anim-ramka-5 {
    from {
        background-position: 0;
    }
 
    to {
        background-position: 0 450px;
    }
}</style>


Код любой готовой рамки устанавливаем в сообщении в режиме HTML. У кого появятся вопросы пишите в комментариях. Разберёмся. 

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

22 комментария:

  1. Здравствуй, Виктория! Классные рамки! Подойдут для важных объявлений в блоге! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Ирина. да, они обращают на себя внимание. Можно и фоточки вставлять.

      Удалить
  2. Привет, Вика. Ой, какие "живые" рамки. Где-нибудь можно поиграть с ними.

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Как правильно выразилась, что они "живые" . Ты найдёшь им применение.

      Удалить
  3. Черт побери! действительно, классные рамки!

    ОтветитьУдалить
  4. Семён, вот что CSS чудотворный делает!!!

    ОтветитьУдалить
  5. Рамочка 4 очень оригинальна! На нее даже без текста и картинки можно смотреть).

    ОтветитьУдалить
  6. Валерия, привет. Я в неё вставляла рожицу - мем, да ещё гифку. мои обхохотались. Прикольно.

    ОтветитьУдалить
  7. какие прикольные! А как бы в них видосики вставить? или можно только текст и картинки?

    ОтветитьУдалить
  8. Можно по этому принципу попробовать вставить http://www.shpargalochki.ru/2017/10/video--youtube-kak-v-televizionnom-kadre-blogger.html

    ОтветитьУдалить
    Ответы
    1. спасибо,Вика,тут всё получилось,в гаджет поставила,сейчас там ещё гляну

      Удалить
  9. Шикарные рамочки .Спасибо Вика!

    ОтветитьУдалить
  10. Рада, что понравились.

    ОтветитьУдалить
  11. Красиво, тут не наиграться со стилями.

    ОтветитьУдалить
  12. Ответы
    1. Максимилиан Эдельман, привет. Забирай конечно. Спасибо, что заглянул.

      Удалить
  13. Анонимно5/08/2020

    Подскажите, пожалуйста, не получается вставить картинку.
    <div class="ramka-1"><img src="/static/avatars/gopher5.jpg"></div>
    выводит просто изображение, без рамки, как пофиксить?)

    ОтветитьУдалить
    Ответы
    1. Так а стили - то тоже нужно прописывать
      <style>

      .ramka-1 {
      position: relative;
      z-index: 0;
      width: 200px;
      height: 200px;
      border-radius: 10px;
      overflow: hidden;
      margin: 30px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-family: 'Roboto Condensed', sans-serif;
      }
      .ramka-1::before {
      content: '';
      position: absolute;
      z-index: -2;
      left: -50%;
      top: -50%;
      width: 200%;
      height: 200%;
      background-color: #EF6C00;
      background-repeat: no-repeat;
      background-size: 50% 50%, 50% 50%;
      background-position: 0 0, 100% 0, 100% 100%, 0 100%;
      background-image: linear-gradientundefined#EF6C00, #EF6C00), linear-gradientundefined#FFE0B2, #FFE0B2), linear-gradientundefined#EF6C00, #EF6C00), linear-gradientundefined#FFE0B2, #FFE0B2);
      animation: anim-ramka-1 4s linear infinite;
      }
      .ramka-1::after {
      content: '';
      position: absolute;
      z-index: -1;
      left: 6px;
      top: 6px;
      width: calcundefined100% - 12px);
      height: calcundefined100% - 12px);
      background: white;
      border-radius: 5px;
      }
      @keyframes anim-ramka-1 {
      100% {
      transform: rotateundefined1turn);
      }
      }</style>

      Удалить
    2. Анонимно5/09/2020

      Стиль, естесственно, прописал) У вас с картинкой работает? Если да, то буду разбираться, что конкретно у меня не так. Я особо не разбираюсь во фронте, пришлось столкнуться, так скажем)

      Удалить
  14. Вот прямо в посте все варианты работают наглядно видно. Напишите через форму связи выше свой код и адрес картинки.

    ОтветитьУдалить
  15. Анонимно5/09/2020

    Разобрался. Проблема была в том, что если рамка не больше по ширине, чем изображение, то показывается только изображение. Спасибо за уделенное время. Успехов)

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML