scale effect
menu-item-css-effecti
.menu-item:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
}
Arka plan renk değiştirme
.menu-item:hover {
background-color: #ff007f;
transition: background-color 0.3s ease;
}
Text rengi değiştirme
.menu-item:hover {
color: #ff007f;
transition: color 0.3s ease;
}
Alt çizgi animasyon
.menu-item {
position: relative;
}
.menu-item::after {
content: "";
position: absolute;
width: 0;
height: 2px;
background-color: #ff007f;
bottom: 0;
left: 50%;
transition: width 0.3s ease, left 0.3s ease;
}
.menu-item:hover::after {
width: 100%;
left: 0;
}
Yazı parlaması
.menu-item:hover {
text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f;
}
Fırlama effekti
.menu-item:hover {
animation: bounce 0.5s;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
Dönen effekti
.menu-item:hover {
transform: rotate(360deg);
transition: transform 0.5s ease;
}
Kenarlık effekti
.menu-item {
position: relative;
border: 2px solid transparent;
}
.menu-item:hover {
border-color: #ff007f;
transform: scale(1.05);
}
Şeffaflık effekti
.menu-item:hover {
opacity: 0.5;
transition: opacity 0.3s ease;
}
Yavaşça kayma effekti
.menu-item {
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.menu-item:hover {
transform: translateX(0);
}
