Delivery Bot Robot SVG | كود روبوت توصيل متحرك HTML و CSS جاهز
🚚 Delivery Bot Robot: روبوت توصيل SVG متحرك بكود HTML و CSS جاهز للنسخ
يا غوالي أهلاً بكم من جديد في عالم الأكواد والتصاميم التفاعلية على Wowolabs 🚀
إذا كنت تبحث عن روبوت توصيل خفيف وجميل لموقعك أو مشروعك، فهذا التصميم مناسب لك. Delivery Bot Robot يأتي بشكل بسيط مع حركة دوران للعجلات.
التصميم مبني باستخدام HTML و CSS و SVG فقط، بدون مكتبات خارجية وبدون ملفات ثقيلة.
ما هو Delivery Bot Robot؟
Delivery Bot Robot هو تصميم روبوت توصيل SVG خفيف يعمل مباشرة داخل المتصفح. يتميز بشكل بسيط وحركة دوران للعجلات تعطيه إحساسًا بالحركة والتفاعل.
يمكن استخدام هذا الروبوت في مواقع الخدمات، صفحات الطلبات، مشاريع التوصيل، مقالات البرمجة، أو صفحات الأكواد الجاهزة.
مميزات روبوت التوصيل
- تصميم SVG خفيف وسريع التحميل.
- يعمل باستخدام HTML و CSS فقط.
- يحتوي على حركة دوران للعجلات.
- مناسب لمواقع التوصيل والخدمات.
- سهل تعديل الألوان والحجم.
- لا يحتاج إلى JavaScript أو مكتبات خارجية.
المعاينة الحية للروبوت
طريقة استخدام الكود
انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر روبوت التوصيل مباشرة بدون إعدادات صعبة.
كيفية تعديل الألوان
يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. مثلًا تستطيع تعديل هذه القيم:
fill="#f97316"
fill="#6366f1"
fill="#ec4899"
stroke="#1e293b"غيّر هذه الألوان لأي ألوان تناسب موقعك أو مشروعك.
الكود الكامل لروبوت 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>أين يمكن استخدام Delivery Bot Robot؟
- في مواقع التوصيل والخدمات.
- في صفحات الطلبات والمتاجر.
- في مقالات البرمجة.
- في صفحات الأكواد الجاهزة.
- في مشاريع HTML و CSS التعليمية.
- في بلوجر أو ووردبريس.
أسئلة شائعة
هل يعمل الكود على بلوجر؟
نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.
هل يحتاج الروبوت إلى JavaScript؟
لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.
هل يمكن تغيير ألوان الروبوت؟
نعم، يمكنك تعديل ألوان الجسم والعجلات والرأس من داخل كود SVG.
هل التصميم مناسب للهاتف؟
نعم، التصميم خفيف ويظهر بشكل جيد على الشاشات الصغيرة والكبيرة.
الخلاصة
Delivery Bot Robot هو روبوت SVG بسيط وخفيف مناسب لمواقع التوصيل والخدمات وصفحات البرمجة. الكود جاهز للنسخ، سهل التعديل، ولا يحتاج إلى مكتبات خارجية.