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

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

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