جوانکاری و جووڵاندنی پاژەکانی ناو ماڵپەڕ (بەشی 3)
جووڵانە پێشکەوتووەکان؛ ئێفێکتی جوان
جووڵانی پێشکەوتوو
لەم بابەتەدا چەند ئێفێکتێکی بێ‌وێنە پێشان دەدەین کە تەنیا بە CSS دروست دەکرێن.نموونەی یەکەم: پاشبنەمای جووڵاو (Animated Gradient)
<style> @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-bg { width: 100%; height: 300px; background: linear-gradient(-45deg, #6366f1, #ec4899, #06b6d4, #10b981); background-size: 400% 400%; animation: gradient-shift 8s ease infinite; border-radius: 15px; } </style>ئەنجام: پاشبنەما وەک شەپۆلێکی ڕەنگاوڕەنگ دەجووڵێت.
نموونەی دووەم: کارتی سێجا (3D Tilt)
<style> .card-3d { width: 250px; height: 300px; background: linear-gradient(135deg, #059, #095); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; transition: transform 0.5s ease; transform-style: preserve-3d; perspective: 1000px; } .card-3d:hover { transform: rotateY(35deg) rotateX(-30deg) scale(1.05); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); } </style> ئەنجام: کارتەکە بە شێوەی 3D دەسووڕێتەوە کاتێک ماوس دەچێتە سەری.
نموونەی سێهەم: دەقەکانی لە خوارەوەڕا دەردەکەون (Fade In Up)
<style> @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-text { font-size: 24px; color: #6366f1; animation: fadeInUp 0.8s ease forwards; opacity: 0; } </style> ئەنجام: نووسینەکە بە نەرمی لە خوارەوە دەردەکەوێت، بەرەوسەر دێت و لە جێگای خۆی ڕادەوەستێت.
نموونەی چوارەم: ئێفێکتی شووشەیی (Ripple Effect)
<style>
.ripple-btn {
position: relative;
padding: 15px 35px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
overflow: hidden;
}
.ripple-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.ripple-btn:hover::before {
width: 300px;
height: 300px;
}
.ripple-btn span {
position: relative;
z-index: 1;
}
</style>
ئەنجام: کاتێک ماوس دەچێتە سەر دوگمەکە، شەپۆلێکی سپی لە ناوەڕاستەوە بڵاو دەبێتەوە.
نموونەی پێنجەم: کارتی چیندار (Hover Card with Overlay)
<style> .hover-card { position: relative; width: 280px; height: 200px; border-radius: 15px; overflow: hidden; cursor: pointer; } .hover-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hover-card:hover img { transform: scale(1.15); } .hover-card .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: #fff; transform: translateY(100%); transition: transform 0.4s ease; } .hover-card:hover .overlay { transform: translateY(0); } </style> ئەنجام: چینێکی ناوەرۆک لە خوارەوە دەردەکەوێت و دێتەسەر وێنەکە.
نموونەی شەشەم: دوگمەی شووشەیی (Glow Button)
<style> @keyframes glow { 0%, 100% { box-shadow: 0 0 5px #F60, 0 0 20px #FF0, 0 0 30px #5F5; } 50% { box-shadow: 0 0 10px #09F, 0 0 30px #F0F, 0 0 50px #CF0; } } .glow-btn { padding: 15px 40px; background: #6366f1; color: #fff; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; animation: glow 2s ease-in-out infinite; } </style>ئەنجام: دوگمەکە بەردەوام دەدرەوشێتەوە وەک ئەستێرەیەک.
ئامۆژگاری: هەرگیز زۆر جووڵان بەکارمەهێنە — کەم بەڵام بەجێ، جوانترە لە زۆر بەڵام بێ سەروبەر.
نموونەی پێنجەم: کارتی چیندار (Hover Card with Overlay)
<style> .hover-card { position: relative; width: 280px; height: 200px; border-radius: 15px; overflow: hidden; cursor: pointer; } .hover-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hover-card:hover img { transform: scale(1.15); } .hover-card .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: #fff; transform: translateY(100%); transition: transform 0.4s ease; } .hover-card:hover .overlay { transform: translateY(0); } </style> ئەنجام: چینێکی ناوەرۆک لە خوارەوە دەردەکەوێت و دێتەسەر وێنەکە.
نموونەی شەشەم: دوگمەی شووشەیی (Glow Button)
<style> @keyframes glow { 0%, 100% { box-shadow: 0 0 5px #F60, 0 0 20px #FF0, 0 0 30px #5F5; } 50% { box-shadow: 0 0 10px #09F, 0 0 30px #F0F, 0 0 50px #CF0; } } .glow-btn { padding: 15px 40px; background: #6366f1; color: #fff; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; animation: glow 2s ease-in-out infinite; } </style>ئەنجام: دوگمەکە بەردەوام دەدرەوشێتەوە وەک ئەستێرەیەک.
خاڵە گرنگەکان بۆ جووڵانە پێشکەوتووەکان
| خاڵ | ڕوونکردنەوە |
| transform-style: preserve-3d | بۆ ئێفێکتەکانی 3D |
| perspective | قووڵی دیمەن |
| overflow: hidden | بۆ ئێفێکتی شوشە |
| ::before / ::after | بۆ دروستکردنی شتە زیادەکان |
| cubic-bezier() | بۆ جووڵانی تایبەت |
کۆتایی
CSS تەنیا بۆ ڕازاندنەوە نییە؛ بە Transition و @keyframes دەتوانیت ژیان بخەیتە ناو ماڵپەڕەکەت. ئەم نموونانە تەنها دەستپێکێکن؛ بە تاقیکردنەوە و تێکەڵکردنیان، دەتوانیت ئێفێکتی زۆر سەرسوڕهێنەر دروست بکەیت.ئامۆژگاری: هەرگیز زۆر جووڵان بەکارمەهێنە — کەم بەڵام بەجێ، جوانترە لە زۆر بەڵام بێ سەروبەر.
هەموو نموونەکان بە یەکەوە بۆ تاقیکردنەوە
<style>
.container {text-align:center;width:80%;margin:100px auto}
/* ---- 1 ---- */
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-bg {
width: 100%;
height: 300px;
background: linear-gradient(-45deg, #6366f1, #ec4899, #06b6d4, #10b981);
background-size: 400% 400%;
animation: gradient-shift 8s ease infinite;
border-radius: 15px;
}
/* ---- 2 ---- */
.card-3d {
width: 250px;
height: 300px;
background: linear-gradient(135deg, #059, #095);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
transition: transform 0.5s ease;
transform-style: preserve-3d;
perspective: 1000px;
}
.card-3d:hover {
transform: rotateY(35deg) rotateX(-30deg) scale(1.05);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
/* ---- 3 ---- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contain {
padding: 50px;
background: #f0f0f0;
min-height: 200px;
}
.fade-in-text {
font-size: 24px;
color: #6366f1;
font-weight: bold;
margin-bottom: 15px;
animation: fadeInUp 0.8s ease forwards;
}
/* تاقیکردنەوە: کلیک بکە بۆ دووبارەکردنەوە */
.fade-in-text:nth-child(2) { animation-delay: 0.2s; opacity: 0; }
.fade-in-text:nth-child(3) { animation-delay: 0.4s; opacity: 0; }
.fade-in-text:nth-child(4) { animation-delay: 0.6s; opacity: 0; }
/* چارەسەر: ئەگەر opacity:0 لە سەرەتادا دانراوە، دەبێت animation-fill-mode: both بێت */
.fade-in-text.with-fill {
opacity: 0;
animation: fadeInUp 0.8s ease both;
}
/* ---- 4 ---- */
.ripple-btn {
position: relative;
padding: 15px 35px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
overflow: hidden;
}
.ripple-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.ripple-btn:hover::before {
width: 300px;
height: 300px;
}
.ripple-btn span {
position: relative;
z-index: 1;
}
/* ---- 5 ---- */
.hover-card {
position: relative; /* ← زۆر گرنگ */
width: 280px;
height: 200px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
background: #6366f1; /* ← باکگراوندی یەدەگ ئەگەر وێنە نەبوو */
}
.hover-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* ← گرنگ بۆ ڕێگری لە بۆشایی */
transition: transform 0.5s ease;
}
.hover-card:hover img {
transform: scale(1.15);
}
.hover-card .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), transparent);
color: #fff;
transform: translateY(100%);
transition: transform 0.4s ease;
z-index: 2; /* ← گرنگ بۆ ئەوەی لە سەر وێنە بێت */
}
.hover-card:hover .overlay {
transform: translateY(0);
}
.overlay h3 {
font-size: 18px;
margin-bottom: 5px;
}
.overlay p {
font-size: 13px;
opacity: 0.9;
}
/* ---- 6 ---- */
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px #F60, 0 0 20px #FF0, 0 0 30px #5F5; }
50% { box-shadow: 0 0 10px #09F, 0 0 30px #F0F, 0 0 50px #CF0; }
}
.glow-btn {
padding: 15px 40px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
animation: glow 2s ease-in-out infinite;
}
</style>
<div class="container">
<button class="gradient-bg">پاشبنەمای جووڵاو</button>
<hr>
<div class="card-3d">کارت</div>
<hr>
<div class="contain">
<div class="fade-in-text">نووسینی یەکەم — بە نەرمی دەردەکەوێت</div>
<div class="fade-in-text">نووسینی دووەم — دوای ٠.٢ چرکە</div>
<div class="fade-in-text">نووسینی سێیەم — دوای ٠.٤ چرکە</div>
<div class="fade-in-text">نووسینی چوارەم — دوای ٠.٦ چرکە</div>
</div>
<hr>
<button class="ripple-btn">شەپۆلی نووسراوە</button>
<hr>
<div class="hover-card">
<!-- بەبێ وێنە: باکگراوندی ڕەنگاوڕەنگ -->
<div style="width:100%; height:100%; background: linear-gradient(135deg, #6366f1, #ec4899); display:flex; align-items:center; justify-content:center; color:#fff; font-size:60px;">
🌟
</div>
<div class="overlay">
<h3>ناونیشانی کارت</h3>
<p>ئەم ناورڕۆکە کاتێک ماوس دەچێتە سەری، دەردەکەوێت</p>
</div>
</div>
<hr>
<button class="glow-btn">دوگمەی شووشەیی</button>
</div>
بارکردنی سەرنجەکان...