Изображения. Анимирани рамки на CSSЗ
Здравейте, приятели. Красивите анимирани рамки винаги привличат вниманието на читателите. Освен изображение можете да поставите и текст на страница в такава рамка. Така ще оформите интересен за читателите си блок.
![Изображения. Анимирани рамки на CSSЗ Анимирани рамки на CSSЗ](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQtDCOXUp9XHetguCjZG32TKnXX0CpiDvmt5RE94XYSE1Ae1tZm7whZ3JNiek7xLX9veTNTwJ3n2xdPQP-qaAT7zjE1dxTR85dJm6cvxruPjuoP7Cp5667bih0C4ek77QdGpfT3Wknx8/s320/ramki2-min.png)
Преди време писах публикации за подобно оформление. Можете да видите дали сте пропуснали как да създадете ефекта от появяваща се рамка или рамка с веер ефект.
Днес ще направим няколко варианта за красиви анимирани рамки с помощта на CSS. Всички предложени кодове имат зададена ширина и височина, цвят, размер на шрифта. Ако предложението ви подхожда, копирайте желания код. Ако е необходимо, можете да го промените в желаните стилове.
Нека да ги видим.
За да видите вариант 3 използвайте този инструмент.
Рамка. Вариант 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. Благодаря за темата и кодовете!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](//bgtop.net/images/bgtop8831.gif)
Или подкрепете моя проект
Здраве за всички вас! Не забравяйте да правите добро на други хора!
![Изображения. Анимирани рамки на CSSЗ Анимирани рамки на CSSЗ](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQtDCOXUp9XHetguCjZG32TKnXX0CpiDvmt5RE94XYSE1Ae1tZm7whZ3JNiek7xLX9veTNTwJ3n2xdPQP-qaAT7zjE1dxTR85dJm6cvxruPjuoP7Cp5667bih0C4ek77QdGpfT3Wknx8/s320/ramki2-min.png)
Нека да ги видим.
Първи вариант
Код
<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>
.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>
<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>
<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>
<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. Благодаря за темата и кодовете!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)