הדגמה פשוטה זו מסבירה כיצד להשתמש בהנפשות 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">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>
instagram viewer

סגנון עם קוד CSS

אתה יכול ליצור מדהים אפקטי רקע באמצעות HTML בלבד. אבל עבור הפרויקט הזה, תשתמש ב-CSS כדי לסגנן ולהנפיש את הרקע.

ראשית, הגדר את השוליים והריפוד על 0 כדי להבטיח שאין רווחים מסביב לרקע.

* {
margin: 0;
padding: 0;
}

לאחר מכן, סגננו את קטע האב באמצעות מחלקת העטיפה. לקטע זה יהיו 100% רוחב וגובה כדי למלא את כל העמוד. הגדר את צבע הרקע שלו כגוון כחול ותן לו מיקום מוחלט.

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

סגנון ה-H1 גם עם מיקום מוחלט. כדי למקם אותו במרכז העמוד, התחל על ידי הגדרת המיקום השמאלי העליון שלו ל-50%. לאחר מכן השתמש ב-translate כדי להזיז אותו למעלה ולשמאל, כך שהמרכז שלו יהיה בדיוק באמצע.

.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 האב שלו.

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) להתייחס לראשון div מאז הילד הראשון של .עֲטִיפָה אלמנט הוא ה 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;
}

אתה יכול לתת ל-divs התחתונות אחוזים גבוהים יותר כך שהם יעלו לפסגה במרווחים שונים.

.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. אלה כוללים שינוי צבע הרקע ועיכוב זמן הריצה של אנימציה.

אתה יכול גם להגדיר באיזו תדירות אנימציה צריכה לרוץ, אפילו עד אינסוף. אתה יכול גם להגדיר את הכיוון שהאנימציה צריכה לנוע: קדימה או אחורה. כיף לשחק עם אנימציות ותוכל להשתמש בהן כדי להחיות את היישומים שלך.