- Katılım
- 19 Ocak 2024
- Mesajlar
- 159
- Tepkime puanı
- 10
- Puanları
- 18
- Ödüller
- 5
CSS ile Kenarlık (Border) Animasyonları
Kenarlık animasyonları, modern web tasarımlarında sayfa öğelerini vurgulamak için sıkça kullanılan bir tekniktir. Bu teknikle bir öğeye şık ve dinamik bir görünüm kazandırabilirsiniz. İşte CSS kullanarak farklı kenarlık animasyonları oluşturmanın yolları.
Basit Kenarlık Animasyonu
Bir öğenin üzerine gelindiğinde kenarlığın görünmesini sağlayabilirsiniz.
CSS:
.animated-border {
width: 200px;
height: 100px;
border: 2px solid transparent;
text-align: center;
line-height: 100px;
font-size: 18px;
font-family: Arial, sans-serif;
transition: border-color 0.3s;
}
.animated-border:hover {
border-color: #007BFF;
}HTML Yapısı:
HTML:
<div class="animated-border">Hover Yapın</div>Kayan Kenarlık Efekti
Kenarlığın bir yönden diğerine kaymasını sağlamak için animasyon ekleyebilirsiniz.
CSS:
.sliding-border {
width: 200px;
height: 100px;
position: relative;
text-align: center;
line-height: 100px;
font-size: 18px;
font-family: Arial, sans-serif;
overflow: hidden;
}
.sliding-border::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
border: 2px solid #007BFF;
transition: left 0.5s ease;
}
.sliding-border:hover::before {
left: 0;
}HTML Yapısı:
HTML:
<div class="sliding-border">Hover Yapın</div>Döngüsel Kenarlık Animasyonu
Kenarlığın sürekli hareket ettiği bir animasyon için:
CSS:
.circular-border {
width: 150px;
height: 150px;
border: 4px solid transparent;
border-radius: 50%;
position: relative;
animation: rotateBorder 2s linear infinite;
background: conic-gradient(#007BFF, #f4f4f4, #007BFF);
}
@keyframes rotateBorder {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}HTML Yapısı:
HTML:
<div class="circular-border"></div>İçeriği Saran Kenarlık Efekti
Kenarlığın içeriği sarması için bir animasyon oluşturabilirsiniz.
CSS:
.wrap-border {
display: inline-block;
position: relative;
padding: 10px 20px;
font-family: Arial, sans-serif;
font-size: 18px;
text-transform: uppercase;
overflow: hidden;
}
.wrap-border::before, .wrap-border::after {
content: '';
position: absolute;
height: 2px;
background-color: #007BFF;
width: 100%;
top: 0;
left: -100%;
transition: left 0.5s ease;
}
.wrap-border:hover::before {
left: 0;
}HTML Yapısı:
HTML:
<div class="wrap-border">Hover Yapın</div>Kullanım Alanları
- CTA (Call-to-Action) butonları
- Önemli içerik bloklarının vurgulanması
- Dinamik hover efektleriyle kullanıcı etkileşiminin artırılması
