يشرح هذا العرض التوضيحي البسيط كيفية استخدام الرسوم المتحركة لـ CSS للحصول على تأثيرات مرئية مثيرة للاهتمام.

يمكن أن تساهم إضافة خلفية متحركة إلى موقع الويب الخاص بك أو التطبيق في الحصول على تصميم فريد ومثير للاهتمام. يمكن للخلفيات الإبداعية إثارة المشاعر وتعزيز تجربة المستخدم.

هناك العديد من الطرق لإنشاء خلفية متحركة لتطبيقك، ولكن الجمع البسيط بين HTML وCSS العادي يعمل بشكل جيد بشكل خاص. تحقق من هذا المثال، وتعرف على كيفية عمل الكود الخاص به، وشاهد عرضًا توضيحيًا مباشرًا للخلفية المتحركة النهائية.

إنشاء هيكل HTML

ستقوم بإنشاء خلفية زرقاء اللون تحتوي على فقاعات تنمو وتطفو للأعلى. يمكنك رؤية النتيجة النهائية على هذا كودبن.

ابدأ بإنشاء ملف قسم مع الفصل غلاف لإيواء الرسوم المتحركة.

ثم قم بإنشاء 10 divs التي ستمثل الفقاعات. داخل كل div، قم بإنشاء فترة مع الفئة نقطة. أنت تستطيع تعلم علامات HTML الأساسية هذه في 10 دقائق إذا كنت جديدًا على HTML.

<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">





instagram viewer


span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>

النمط باستخدام كود CSS

يمكنك إنشاء شيء لا يصدق تأثيرات الخلفية باستخدام HTML فقط. لكن بالنسبة لهذا المشروع، ستستخدم CSS لتصميم الخلفية وتحريكها.

أولاً، قم بتعيين الهامش والحشوة على 0 لضمان عدم وجود مسافات حول الخلفية.

* {
margin: 0;
padding: 0;
}

ثم قم بتصميم القسم الأصل باستخدام فئة المجمع. سيكون لهذا القسم عرض وارتفاع بنسبة 100% لملء الصفحة بأكملها. قم بتعيين لون خلفيته كظل من اللون الأزرق ومنحه موضعًا مطلقًا.

.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}

صمم H1 بوضعية مطلقة أيضًا. لوضعه في وسط الصفحة، ابدأ بتعيين موضعه العلوي الأيسر على 50%. ثم استخدم "ترجمة" لتحريكه إلى أعلى وإلى اليسار، بحيث يكون مركزه في المنتصف تمامًا.

.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}

بعد ذلك، قم بتصميم divs التي ستكون دائرية لتكون بمثابة فقاعات متحركة. امنح كل div الارتفاع والعرض والحدود. يضمن نصف قطر الحدود الكبير أن تكون الحدود دائرة. قم أيضًا بتعيين مدة الرسوم المتحركة باستخدام خاصية الرسوم المتحركة في CSS.

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

قم بتصميم النقاط بارتفاع وعرض 5 بكسل. أعط النقاط نصف قطر حدودي وخلفية بيضاء. ضع كل واحدة بشكل مطلق، بالقرب من الجزء العلوي الأيمن من القسم الأصلي الخاص بها.

div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}

بعد ذلك، استخدم محدد nth-child لتحديد موضع كل div بإعدادات مختلفة. يمكنك تسمية الرسوم المتحركة تحريك; ستحدده لاحقًا باستخدام @keyframes.

يستخدم الطفل التاسع (2) لمعالجة الأول شعبة منذ الطفل الأول .غلاف العنصر هو h1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

يمكنك منح عناصر div السفلية نسبًا أعلى بحيث ترتفع إلى القمة على فترات زمنية مختلفة.

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

استخدم @keyframes لتغيير الدوائر والنقاط وتدويرها تدريجيًا على فترات زمنية مختلفة. في الكود التالي، تدور النقاط بزاوية 70 درجة والدوائر بزاوية 360 درجة. يؤدي هذا التدوير إلى إنشاء تأثير الفقاعة.

@keyframes animate {
 0% {
transform: scale(0) translateY(0) rotate(70deg);
 }
 100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
 }
}

أنت تستطيع جعل الخلفيات أكثر أناقة باستخدام أنماط CSS. تتيح لك الأنماط إنشاء موجات وشبكات وأوراق شجر وأنماط أخرى لمساعدتك في إنشاء رسوم متحركة مذهلة.

يمكنك تحريك العديد من الخصائص باستخدام CSS

يمكنك إنشاء أنواع مختلفة من الرسوم المتحركة باستخدام CSS. يتضمن ذلك تغيير لون الخلفية وتأخير وقت تشغيل الرسوم المتحركة.

يمكنك أيضًا تعيين عدد مرات تشغيل الرسوم المتحركة، حتى إلى ما لا نهاية. يمكنك أيضًا ضبط الاتجاه الذي يجب أن تتحرك به الرسوم المتحركة: للأمام أو للخلف. من الممتع اللعب بالرسوم المتحركة ويمكنك استخدامها لإضفاء الحيوية على تطبيقاتك.