🤖 Cute Bot Robot: روبوت لطيف SVG متحرك بكود HTML و CSS جاهز للنسخ
01ما هو Cute Bot Robot؟
Cute Bot Robot هو تصميم روبوت SVG لطيف يعمل مباشرة داخل المتصفح. يظهر بوجه مبتسم وألوان جميلة وحركة طفو خفيفة تعطي الصفحة إحساسًا بالحياة.
وإذا كنت تريد مقارنة هذا النموذج بروبوت آخر من نفس مجموعة الأكواد، يمكنك الانتقال إلى tech-bot-robot.
يمكن استخدام هذا الروبوت داخل مواقع الأطفال، صفحات البرمجة، مشاريع HTML و CSS، صفحات الترحيب، أو المقالات التي تعرض أكواد جاهزة للنسخ.
02مميزات الروبوت اللطيف
- تصميم SVG خفيف وسريع التحميل.
- يعمل باستخدام HTML و CSS فقط.
- يحتوي على حركة طفو بسيطة.
- مناسب للمواقع التعليمية والبرمجية.
- سهل تعديل الألوان والحجم.
- لا يحتاج إلى JavaScript أو مكتبات خارجية.
03المعاينة الحية للروبوت
04طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر Cute Bot Robot مباشرة بدون إعدادات صعبة.
ولمشاهدة نموذج آخر من نفس سلسلة الروبوتات قبل اختيار التصميم المناسب، يمكنك فتح shopping-bot-robot.
05كيفية تعديل الألوان
يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. مثلًا تستطيع تعديل القيم الموجودة في الكود مثل #f97316 و#10b981 و#ec4899 و#1e293b.
06الكود الكامل لروبوت Cute Bot
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Bot Robot</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
.svg-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
svg {
width: 220px;
height: 220px;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
}
</style>
</head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" class="animate-float" role="img" aria-label="Cute Bot Robot">
<circle cx="50" cy="70" r="25" fill="#f97316" stroke="white" stroke-width="3"/>
<circle cx="40" cy="75" r="8" fill="white"/>
<circle cx="60" cy="75" r="8" fill="white"/>
<circle cx="40" cy="75" r="4" fill="#1e293b"/>
<circle cx="60" cy="75" r="4" fill="#1e293b"/>
<path d="M42,62 Q50,68 58,62" fill="none" stroke="#1e293b" stroke-width="3" stroke-linecap="round"/>
<circle cx="32" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
<circle cx="68" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
<rect x="35" y="30" width="30" height="25" rx="8" fill="#10b981" stroke="white" stroke-width="2"/>
<rect x="42" y="38" width="16" height="10" fill="#1e293b" stroke="#f8fafc"/>
<text x="50" y="45" text-anchor="middle" fill="#10b981" font-size="8" font-weight="bold">Hi!</text>
<rect x="38" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
<rect x="54" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
</svg>
</div>
</body>
</html>07أين يمكن استخدام Cute Bot Robot؟
- في صفحات الترحيب.
- في مواقع التعليم والأطفال.
- في مقالات البرمجة.
- في صفحات الأكواد الجاهزة.
- في مشاريع HTML و CSS التعليمية.
- في بلوجر أو ووردبريس.
وهذا المقال نفسه هو cute-bot-robot ضمن مجموعة أكواد الروبوتات.
01هل يعمل الكود على بلوجر؟
نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى JavaScript؟
لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.
03هل يمكن تغيير ألوان الروبوت؟
نعم، يمكنك تعديل ألوان الوجه والرأس والخدود من داخل كود SVG.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.