Изображения. Анимирани рамки на CSSЗ

Здравейте, приятели. Красивите анимирани рамки винаги привличат вниманието на читателите. Освен изображение можете да поставите и текст на страница в такава рамка. Така ще оформите интересен за читателите си блок.

Преди време писах публикации за подобно оформление. Можете да видите дали сте пропуснали как да създадете ефекта от появяваща се рамка или рамка с веер ефект.

1. Първи вариант
2. Втори вариант
3. Трети вариант
4. Четвърти вариант
5. Пети вариант
6. Уточнения:

Днес ще направим няколко варианта за красиви анимирани рамки с помощта на CSS. Всички предложени кодове имат зададена ширина и височина, цвят, размер на шрифта. Ако предложението ви подхожда, копирайте желания код. Ако е необходимо, можете да го промените в желаните стилове.
Нека да ги видим.

Първи вариант

Код

<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 използвайте този инструмент.

Код

<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 използвайте този инструмент.

Код

<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>

Четвърти вариант

Код

<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

Код

<div class="ramka-5-wr">

<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 режим, на желаното място;

Идеята почерпих от atuin.ru. Благодаря за темата и кодовете!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

Или подкрепете моя проект

Здраве за всички вас! Не забравяйте да правите добро на други хора!