Изображения. Анимирани рамки на CSSЗ
.jpg)
сряда
Здравейте, приятели. Красивите анимирани рамки винаги привличат вниманието на читателите. Освен изображение можете да поставите и текст на страница в такава рамка. Така ще оформите интересен за читателите си блок.
Преди време писах публикации за подобно оформление. Можете да видите дали сте пропуснали как да създадете ефекта от появяваща се рамка или рамка с веер ефект.
Днес ще направим няколко варианта за красиви анимирани рамки с помощта на 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. Благодаря за темата и кодовете!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Преди време писах публикации за подобно оформление. Можете да видите дали сте пропуснали как да създадете ефекта от появяваща се рамка или рамка с веер ефект.
Нека да ги видим.
Първи вариант
Код
<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. Благодаря за темата и кодовете!
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
