🚚 Delivery Bot Robot: روبوت توصيل SVG متحرك بكود HTML و CSS جاهز للنسخ
01ما هو Delivery Bot Robot؟
Delivery Bot Robot هو تصميم روبوت توصيل SVG خفيف يعمل مباشرة داخل المتصفح. يتميز بشكل بسيط وحركة دوران للعجلات تعطيه إحساسًا بالحركة والتفاعل.
يمكن استخدام هذا الروبوت في مواقع الخدمات، صفحات الطلبات، مشاريع التوصيل، مقالات البرمجة، أو صفحات الأكواد الجاهزة. ويمكن مشاهدة shopping-bot-robot من نفس مجموعة أكواد الروبوتات.
02مميزات روبوت التوصيل
- تصميم SVG خفيف وسريع التحميل.
- يعمل باستخدام HTML و CSS فقط.
- يحتوي على حركة دوران للعجلات.
- مناسب لمواقع التوصيل والخدمات.
- سهل تعديل الألوان والحجم.
- لا يحتاج إلى JavaScript أو مكتبات خارجية.
03المعاينة الحية للروبوت
04طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر روبوت التوصيل مباشرة بدون إعدادات صعبة.
ويمكنك أيضًا مشاهدة settings-bot-robot-svg ضمن نفس المجموعة.
05كيفية تعديل الألوان
يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. مثلًا تستطيع تعديل قيم fill وstroke الموجودة داخل الكود، ثم اختيار الألوان المناسبة لموقعك أو مشروعك.
06أين يمكن استخدام Delivery Bot Robot؟
- في مواقع التوصيل والخدمات.
- في صفحات الطلبات والمتاجر.
- في مقالات البرمجة.
- في صفحات الأكواد الجاهزة.
- في مشاريع HTML و CSS التعليمية.
- في بلوجر أو ووردبريس.
ومن نفس مجموعة الروبوتات يمكنك مشاهدة analytics-bot-robot.
07الكود الكامل لروبوت Delivery 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>Delivery 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 rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-rotate {
animation: rotate 4s linear 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" role="img" aria-label="Delivery Bot Robot">
<line x1="15" y1="90" x2="35" y2="90" stroke="#1e293b" stroke-width="4"/>
<line x1="65" y1="90" x2="85" y2="90" stroke="#1e293b" stroke-width="4"/>
<rect x="13" y="88" width="24" height="4" fill="#ec4899" stroke="white" class="animate-rotate" style="transform-origin:25px 90px;"/>
<rect x="63" y="88" width="24" height="4" fill="#ec4899" stroke="white" class="animate-rotate" style="transform-origin:75px 90px;"/>
<line x1="25" y1="88" x2="35" y2="80" stroke="#1e293b" stroke-width="3"/>
<line x1="75" y1="88" x2="65" y2="80" stroke="#1e293b" stroke-width="3"/>
<rect x="30" y="40" width="40" height="40" rx="5" fill="#f97316" stroke="white" stroke-width="2"/>
<circle cx="50" cy="60" r="10" fill="#1e293b" stroke="#ec4899" stroke-width="2"/>
<circle cx="50" cy="60" r="5" fill="#ec4899"/>
<rect x="35" y="20" width="30" height="20" rx="2" fill="#6366f1" stroke="white" stroke-width="2"/>
<rect x="35" y="28" width="30" height="4" fill="#ec4899"/>
</svg>
</div>
</body>
</html>08الخلاصة
Delivery Bot Robot هو روبوت SVG بسيط وخفيف مناسب لمواقع التوصيل والخدمات وصفحات البرمجة. الكود جاهز للنسخ، سهل التعديل، ولا يحتاج إلى مكتبات خارجية.
01هل يعمل الكود على بلوجر؟
نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى JavaScript؟
لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.
03هل يمكن تغيير ألوان الروبوت؟
نعم، يمكنك تعديل ألوان الجسم والعجلات والرأس من داخل كود SVG.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.