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. У кого появятся вопросы пишите в комментариях. Разберёмся. 

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

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

17 комментариев:

  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. Максимилиан Эдельман, привет. Забирай конечно. Спасибо, что заглянул.

      Удалить

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

Пользовательский поиск