Привет, друзья. Красивые анимированные рамки для блоков div всегда привлекают внимание читателей. Вы можете оформить на странице в такую рамку текст или картинку.
В своё время я уже писала статьи про такое оформление.
Вы можете посмотреть, если пропустили как создать эффект появления рамки , или просто красивые рамки для изображений в блоге, или рамка с эффектом веера.
Сегодня поколдуем и ёщё сделаем 5 вариантов красивых анимированных рамок с использованием CSS. Все предложенные коды имеют заданную ширину и высоту, цвет, размер шрифта. Если вам вариант подходит сразу копируйте нужный код. При необходимости, вы сможете их поменять на нужные стили. Воспользуйтесь этим редактором.
Давайте смотреть
Рамка 1.
Код
Рамка 2. Большая рамка с ховер-эффектом.
Код
Рамка 3. Рамка с фиксированным бордюром и плавающей вокруг ещё рамкой.
Код
Рамка 4. Этот вариант с изменяющимся свойством border-radius. Он имеет заданную ширину и длину, поэтому их стоит подгонять под размер расположенного в нем контента.
Код
Рамка 5. Бегущие строчки.
Код
Код любой готовой рамки устанавливаем в сообщении в режиме HTML. У кого появятся вопросы пишите в комментариях. Разберёмся.
В своё время я уже писала статьи про такое оформление.
Вы можете посмотреть, если пропустили как создать эффект появления рамки , или просто красивые рамки для изображений в блоге, или рамка с эффектом веера.

Сегодня поколдуем и ёщё сделаем 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>
<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>
<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>
<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>
<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>
Рамка 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. У кого появятся вопросы пишите в комментариях. Разберёмся.
оформите подписку на новые шпаргалки
Здравствуй, Виктория! Классные рамки! Подойдут для важных объявлений в блоге! Спасибо!
ОтветитьУдалитьПожалуйста, Ирина. да, они обращают на себя внимание. Можно и фоточки вставлять.
УдалитьПривет, Вика. Ой, какие "живые" рамки. Где-нибудь можно поиграть с ними.
ОтветитьУдалитьЛюба, привет. Как правильно выразилась, что они "живые" . Ты найдёшь им применение.
УдалитьЧерт побери! действительно, классные рамки!
ОтветитьУдалитьСемён, вот что CSS чудотворный делает!!!
ОтветитьУдалитьРамочка 4 очень оригинальна! На нее даже без текста и картинки можно смотреть).
ОтветитьУдалитьВалерия, привет. Я в неё вставляла рожицу - мем, да ещё гифку. мои обхохотались. Прикольно.
ОтветитьУдалитькакие прикольные! А как бы в них видосики вставить? или можно только текст и картинки?
ОтветитьУдалитьМожно по этому принципу попробовать вставить http://www.shpargalochki.ru/2017/10/video--youtube-kak-v-televizionnom-kadre-blogger.html
ОтветитьУдалитьспасибо,Вика,тут всё получилось,в гаджет поставила,сейчас там ещё гляну
УдалитьШикарные рамочки .Спасибо Вика!
ОтветитьУдалитьРада, что понравились.
ОтветитьУдалитькрасиво!
ОтветитьУдалитьКрасиво, тут не наиграться со стилями.
ОтветитьУдалитьСпасибо. Взял себе)))
ОтветитьУдалитьМаксимилиан Эдельман, привет. Забирай конечно. Спасибо, что заглянул.
УдалитьПодскажите, пожалуйста, не получается вставить картинку.
ОтветитьУдалить<div class="ramka-1"><img src="/static/avatars/gopher5.jpg"></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-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>
Стиль, естесственно, прописал) У вас с картинкой работает? Если да, то буду разбираться, что конкретно у меня не так. Я особо не разбираюсь во фронте, пришлось столкнуться, так скажем)
УдалитьВот прямо в посте все варианты работают наглядно видно. Напишите через форму связи выше свой код и адрес картинки.
ОтветитьУдалитьРазобрался. Проблема была в том, что если рамка не больше по ширине, чем изображение, то показывается только изображение. Спасибо за уделенное время. Успехов)
ОтветитьУдалить