Анимированные рамки для блоков на CSS

Вариант 1:

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

Рамка 1

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

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

.ramka-1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	margin: 30px auto;
	border: 8px solid #337AB7;
	background: #BFE2FF;
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
	box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
	animation: anim-ramka-1 10s infinite;
	font-size: 24px;
	font-family: 'Roboto', sans-serif; 
}
@keyframes anim-ramka-1 {
	0% {
		border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
		box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
	}
	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(0,0,0,0.2);
	}
	75% {
		border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
	}
}

.ramka-1 {

display: flex;

align-items: center;

justify-content: center;

width: 200px;

height: 200px;

margin: 30px auto;

border: 8px solid #337AB7;

background: #BFE2FF;

border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;

box-shadow: 15px 15px 50px rgba(0,0,0,0.2);

animation: anim-ramka-1 10s infinite;

font-size: 24px;

font-family: 'Roboto', sans-serif;

}

@keyframes anim-ramka-1 {

0% {

border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;

box-shadow: 15px 15px 50px rgba(0,0,0,0.2);

}

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(0,0,0,0.2);

}

75% {

border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;

}

Вариант 2:

Рамка с бегущими полосками. Данный блок также имеет заданную ширину и высоту.

Рамка 2

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

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

</div>

.ramka-2-wr {
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	padding: 15px;
	position: relative;
	overflow: hidden;
	margin: 30px auto;
}	
.ramka-2-wr .ramka-2 {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
    font-size: 24px;
    font-family: 'Roboto', sans-serif; 	
}
.ramka-2-wr::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
	background: repeating-linear-gradient(
		#FFF 0%,
		#FFF 7.5px,
		#BFE2FF 7.5px,
		#BFE2FF 15px,
		#FFF 15px,
		#FFF 22.5px,
		#BFE2FF 22.5px,
		#BFE2FF 30px);
	transform: translateX(-20%) translateY(-20%) rotate(-45deg);
	animation: anim-ramka-2 20s linear infinite;
}
.ramka-2-wr .ramka-2 {
	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-2-wr,
.ramka-2-wr .ramka-2 {
	box-shadow: 0 0 2px #BFE2FF, 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-2 {
	from {
		background-position: 0;
	}
	
	to {
		background-position: 0 450px;
	}
}

.ramka-2-wr {

width: 200px;

height: 200px;

box-sizing: border-box;

padding: 15px;

position: relative;

overflow: hidden;

margin: 30px auto;

}

.ramka-2-wr .ramka-2 {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

font-family: 'Roboto', sans-serif;

}

.ramka-2-wr::before {

content: '';

position: absolute;

width: 150%;

height: 150%;

background: repeating-linear-gradient(

#FFF 0%,

#FFF 7.5px,

#BFE2FF 7.5px,

#BFE2FF 15px,

#FFF 15px,

#FFF 22.5px,

#BFE2FF 22.5px,

#BFE2FF 30px);

transform: translateX(-20%) translateY(-20%) rotate(-45deg);

animation: anim-ramka-2 20s linear infinite;

}

.ramka-2-wr .ramka-2 {

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-2-wr,

.ramka-2-wr .ramka-2 {

box-shadow: 0 0 2px #BFE2FF, 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-2 {

from {

background-position: 0;

}

to {

background-position: 0 450px;

}

Вариант 3:

Блок с плавающим бордюром и ховер-эффектом. Он, как и предыдущие, имеет заданную ширину и высоту.

Рамка 3

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

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

.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', sans-serif; 
	box-shadow: inset 0 0 0 1px #337AB7;	
} 
.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 #BFE2FF;
	animation: anim-ramka-3 8s linear infinite; 
}
.ramka-3::before {
	animation-delay: -4s;
}
.ramka-3:hover::after, 
.ramka-3:hover::before {
	background-color: #BFE2FF;
}
@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);
	}
}

.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', sans-serif;

box-shadow: inset 0 0 0 1px #337AB7;

}

.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 #BFE2FF;

animation: anim-ramka-3 8s linear infinite;

}

.ramka-3::before {

animation-delay: -4s;

}

.ramka-3:hover::after,

.ramka-3:hover::before {

background-color: #BFE2FF;

}

@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);

}

Вариант 4:

Вариант очень похожий на предыдущий.

Рамка 4

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

Рамка 4

</div>

.ramka-4 {
	position: relative;
	width: 200px;
	height: 200px;
    margin: 30px auto;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 24px;
    font-family: 'Roboto', sans-serif;   	
}
.ramka-4 span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	z-index: -1;
}
.ramka-4 span:nth-child(1) {
	transform:rotate(0deg);
}
.ramka-4 span:nth-child(2) {
	transform:rotate(90deg);
}
.ramka-4 span:nth-child(3) {
	transform:rotate(180deg);
}
.ramka-4 span:nth-child(4) {
	transform:rotate(270deg);
}
.ramka-4 span:before {
	content: '';
	position: absolute;
	width:100%;
	height: 6px;
	background: #BFE2FF;
	animation: anim-ramka-4 4s linear infinite;
}
@keyframes anim-ramka-4 {
	0% {
		transform:scaleX(0);
		transform-origin: left;
	}
	50% {
		transform:scaleX(1);
		transform-origin: left;
	}
	50.1% {
		transform:scaleX(1);
		transform-origin: right;
	}
	100% {
		transform:scaleX(0);
		transform-origin: right;   
	} 
}

.ramka-4 {

position: relative;

width: 200px;

height: 200px;

margin: 30px auto;

box-sizing: border-box;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

font-family: 'Roboto', sans-serif;

}

.ramka-4 span {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: block;

box-sizing: border-box;

z-index: -1;

}

.ramka-4 span:nth-child(1) {

transform:rotate(0deg);

}

.ramka-4 span:nth-child(2) {

transform:rotate(90deg);

}

.ramka-4 span:nth-child(3) {

transform:rotate(180deg);

}

.ramka-4 span:nth-child(4) {

transform:rotate(270deg);

}

.ramka-4 span:before {

content: '';

position: absolute;

width:100%;

height: 6px;

background: #BFE2FF;

animation: anim-ramka-4 4s linear infinite;

}

@keyframes anim-ramka-4 {

0% {

transform:scaleX(0);

transform-origin: left;

}

50% {

transform:scaleX(1);

transform-origin: left;

}

50.1% {

transform:scaleX(1);

transform-origin: right;

}

100% {

transform:scaleX(0);

transform-origin: right;

}

Вариант 5:

Эта рамка может иметь не 2 цвета, как на примере, а 4. А еще можно получить интересный эффект убрав overflow: hidden

Рамка 5

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

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

.ramka-5 {
	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', sans-serif; 	
}
.ramka-5::before {
	content: '';
	position: absolute;
	z-index: -2;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	background-color: #BFE2FF;
	background-repeat: no-repeat;
	background-size: 50% 50%, 50% 50%;
	background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	background-image: linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7), linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7);
	animation: anim-ramka-5 4s linear infinite;
}
.ramka-5::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-5 {
	100% {
		transform: rotate(1turn);
	}
}

.ramka-5 {

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', sans-serif;

}

.ramka-5::before {

content: '';

position: absolute;

z-index: -2;

left: -50%;

top: -50%;

width: 200%;

height: 200%;

background-color: #BFE2FF;

background-repeat: no-repeat;

background-size: 50% 50%, 50% 50%;

background-position: 0 0, 100% 0, 100% 100%, 0 100%;

background-image: linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7), linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7);

animation: anim-ramka-5 4s linear infinite;

}

.ramka-5::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-5 {

100% {

transform: rotate(1turn);

}

Вариант 6:

Однократная обводка блока рамкой при наведении

Рамка 6

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

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

.ramka-6 {
    width: 200px;
    height: 200px;
	margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;  
    font-size: 24px;
    font-family: 'Roboto', sans-serif;         
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%),
		linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%),
		linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%),
		linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%);
    background-size:    100% 6px, 6px 100%, 100% 6px, 6px 100%;
    background-position:    0 0, 100% 0, 100% 100%, 0 100%;
    animation: anim-ramka-6 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
    animation-play-state: paused;
}
.ramka-6:hover {
    animation-play-state: running;
}
@keyframes anim-ramka-6 {
    0% {
        background-size:    0 6px, 6px 0, 0 6px, 6px 0;
	}
    25% {
        background-size:    100% 6px, 6px 0, 0 6px, 6px 0;
	}
    50% {
        background-size:    100% 6px, 6px 100%, 0 6px, 6px 0;
	}
    75% {
        background-size:    100% 6px, 6px 100%, 100% 6px, 6px 0;
	}
    100% {
        background-size:    100% 6px, 6px 100%, 100% 6px, 6px 100%;
	}
}

.ramka-6 {

width: 200px;

height: 200px;

margin: 30px auto;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

font-family: 'Roboto', sans-serif;

background-repeat: no-repeat;

background-image: linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%),

linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%),

linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%),

linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%);

background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%;

background-position: 0 0, 100% 0, 100% 100%, 0 100%;

animation: anim-ramka-6 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;

animation-play-state: paused;

}

.ramka-6:hover {

animation-play-state: running;

}

@keyframes anim-ramka-6 {

0% {

background-size: 0 6px, 6px 0, 0 6px, 6px 0;

}

25% {

background-size: 100% 6px, 6px 0, 0 6px, 6px 0;

}

50% {

background-size: 100% 6px, 6px 100%, 0 6px, 6px 0;

}

75% {

background-size: 100% 6px, 6px 100%, 100% 6px, 6px 0;

}

100% {

background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%;

}

Вариант 7:

Вариант с большой рамкой и ховер-эффектом

Рамка 7

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

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

.ramka-7 {
	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', sans-serif; 
	box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);
}
.ramka-7:after, 
.ramka-7:before {
	mix-blend-mode:multiply;
	filter:none;
	z-index: -1;
	content:'';
	width: calc(100% + 90px);
	height: calc(100% + 90px);
	position: absolute;
	animation: anim-ramka-7 8s ease-in-out infinite;
}
@keyframes anim-ramka-7 {
	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-7:after{
	animation-delay: -5s;
	background-color: #BFE2FF;
	clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
}
.ramka-7:before {
	background-color: #337AB7;
	clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
}
.ramka-7:hover:before, 
.ramka-7:hover:after {
	animation-play-state: paused;
}

.ramka-7 {

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', sans-serif;

box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);

}

.ramka-7:after,

.ramka-7:before {

mix-blend-mode:multiply;

filter:none;

z-index: -1;

content:'';

width: calc(100% + 90px);

height: calc(100% + 90px);

position: absolute;

animation: anim-ramka-7 8s ease-in-out infinite;

}

@keyframes anim-ramka-7 {

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-7:after{

animation-delay: -5s;

background-color: #BFE2FF;

clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));

}

.ramka-7:before {

background-color: #337AB7;

clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);

}

.ramka-7:hover:before,

.ramka-7:hover:after {

animation-play-state: paused;

}

СЕРГЕЙ: 22.03.2023 в 21:00

Класс! Я из первого варианта кнопку на звонок сделал!)))

Ответить
Lean: 16.01.2023 в 14:43

Как рамку растянуть на 100%?

Ответить
Витя: 12.10.2022 в 21:08

Как можно сдвинуть её влево?

Ответить
- Alexander: 13.10.2022 в 10:41
  
  Изменить margin, убрать или заменить оттуда auto
  
  Ответить
Сергей: 10.07.2021 в 15:57

Рамка 7 не двигается на старых телефонах подскажите почему или сбросьте код рабочий пожалуста

Ответить
- Сергей: 10.07.2021 в 16:06
  
  И не корректно отображается . со здвигом как будто flex не работает((((
  
  Ответить
  - Alexander: 11.07.2021 в 09:57
    
    Пробовать надо, если flex убрать, то удаляем:
    
    height: 200px; display: flex; align-items: center; justify-content: center;
    
    Ставим центр и нужный padding:
    
    text-align: center; padding: 60px 10px
    
    А сюда добавляем:
    
    .ramka-7:after, .ramka-7:before { left: -45px; top: -45px; }
    
    Ответить
    - Сергей: 11.07.2021 в 12:46
      
      Да спасибо все заработало я ещё -webkit- добавил и ок спасибо огромное
      
      Ответить
    - СЕРГЕЙ: 22.03.2023 в 21:01
      
      Уже всё получилось! Спасибо!
      
      Ответить
Антон: 16.04.2021 в 17:49

Спасибо! Очень помогла информация.

Ответить
Никита: 23.02.2021 в 00:49

А как мне поменять цвет и почему то рамку вообще почти невидно там буквально меньше пикселя

Ответить
- Alexander: 23.02.2021 в 14:26
  
  Цвет задается в хексе, например #BFE2FF или #337AB7, а почему не видно рамку, это смотреть нужно.
  
  Ответить
Галина: 17.11.2020 в 21:02

Отличные примеры!

Ответить
Сергей: 11.04.2020 в 00:29

Классная статья! Спасибо!

Ответить
Серафима Хакимова: 21.03.2020 в 17:03

Довольно таки интересные рамки!А как вставить фото в рамку?

Ответить
- Alexander: 22.03.2020 в 09:43
  
  Вместо слова рамка 🙂
  А дальше посмотреть, что получится и подогнать при необходимости
  
  Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

Смотрите также:

Замена блока на фотографию при наведении курсора

3D hover-эффект ориентированный на направление курсора

Адаптивная сетка для новостных блоков

Добавить комментарий:

Комментарии: