مشكل في حل تحدّي EL Letters Animations وتحريك العناصر من خلال CSS

Amen Ramadan · 19 يونيو 2023

مرحبا

كنت احاول حل هذا التحدي لكن يبدو انه لدي خطأ ما ,

لم استطع رسم الحروف ,

حاولت بطريقتين والطريقة الثانية موضوعة بداخل تعليق,

ما هو خطأي وهل من نصيحة للبدء بالحركة الخاصة بالمربع الأصفر

<body>

    <div class="container">
        <div class="character-e"></div>
      
        <!--  الطريقة الثانية هي وضع حاويات تحتوي على نفس لون خلفية العنصر الأب واعطائها مكان خاص من تقسيمة ال grid -->
      
        <!-- <div class="whait-e-1"></div> -->
        <!-- <div class="whait-e-2"></div> -->
        <div class="character-l"></div>
        <!-- <div class="whait-l-1"></div> -->
    </div>
    
</body>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: 400px;
    height: 400px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:    "E E E E L . . ."
                            "E . . . L . . ."
                            "E . . . L . . ."
                            "E E E E L . . ."
                            "E . . . L . . ."
                            "E . . . L . . ."
                            "E E E E L L L L";
    gap: 15px;
    background-color: #eee;
}

.character-e {
    display: grid;
    grid-area: "E";
    background-color: rgb(57, 44, 44);
}

.character-l {
    display: grid;
    grid-area: "L";
    background-color: rgb(57, 44, 44);
}



/* التنسيقات الخاصة بالحل الثاني */


/* .whait-e-1{
    grid-area: 2, 2, 4, 5;
    background-color: #eee;
}
.whait-e-2{
    grid-area: 5, 2, 7, 5;
    background-color: #eee;
} */

/* .white-l-1 {
    grid-area: 1, 6, 7, 9;
    background-color: #eee;
} */




/* الحل الخاص بااالذكاء الاصطناعي  */


/* .container {
    width: 400px;
    height: 400px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
      "E E E E L..."
      "E... L..."
      "E... L..."
      "E E E E L..."
      "E... L..."
      "E... L..."
      "E E E E L L L L";
    gap: 15px;
    background-color: #eee;
  }
  
  .character-e {
    display: grid;
    grid-area: "E";
    background-color: rgb(57, 44, 44);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "E E E E"
      "E E E E"
      "E E E E"
      "E E E E"
      "E E E E";
  }
  
  .character-l {
    display: grid;
    grid-area: "L";
    background-color: rgb(57, 44, 44);
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-template-areas:
      "L";
  }

تم التعديل في 19 يونيو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 19 يونيو 2023

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

وفي حال واجهتك مشكلة في كيفية تنفيذ التحريك Animation فعليك بتعلم كيفية فعل ذلك وستجد شروحات كثيرة لذلك على اليوتيوب مثلاً.

وإليك الكود الصحيح، حاول التعلم منه ثم تطبيق التحدي بأحرف أخرى مثل حرفين من اسمك مثلاً Am.

الكود بدون استخدام Flex Box أو Grid:

HTML

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

<div class="five"></div>
<div class="six"></div>

<div class="seven"></div>
<div class="eight"></div>

CSS:

* {
    box-sizing: border-box;
}

.one {
    background-color: #333;
    width: 300px;
    height: 50px;
    position: absolute;
}

.two {
    background-color: #333;
    width: 300px;
    height: 50px;
    position: absolute;
    top: 200px;
}

.three {
    background-color: #333;
    width: 300px;
    height: 50px;
    position: absolute;
    top: 400px;
}

.four {
    background-color: #333;
    width: 50px;
    height: 442px;
}

.five {
    background-color: #333;
    width: 50px;
    height: 442px;
    transform: translate(340px, -442px)
}

.six {
    background-color: #333;
    width: 300px;
    height: 50px;
    transform: translate(340px, -492px);
}

.seven {
    background-color: orange;
    width: 40px;
    height: 35px;
    transform: translate(590px, -535px);
    animation-name: move1;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;

}

@keyframes move1 {
    0% {
        transform: translate(590px, -535px)
    }
    25% {
        transform: translate(345px, -535px)
    }
    50% {
        transform: translate(345px, -925px)
    }
    100% {
        transform: translate(345px, -925px);
        opacity: 0
    }
}

.eight {
    background-color: orange;
    width: 40px;
    height: 35px;
    transform: translate(250px, -962px);
    animation-name: move2;
    animation-duration: 5s;
    animation-delay: 5s;
    animation-iteration-count: 1;
}

@keyframes move2 {
    0% {
        transform: translate(250px, -962px)
    }
    10% {
        transform: translate(5px, -962px)
    }
    20% {
        transform: translate(5px, -770px)
    }
    30% {
        transform: translate(250px, -770px)
    }
    40% {
        transform: translate(5px, -770px)
    }
    50% {
        transform: translate(5px, -569px)
    }
    60% {
        transform: translate(250px, -569px)
    }
    70% {
       transform: translate(5px, -569px)
    }
    90% {
        transform: translate(5px, -962px)
    }
    100% {
        transform: translate(250px, -962px)
    }
}

الكود باستخدام Grid:

HTML

<div class="parent">
  <div class='one'></div>
  <div class='two'></div>
  <div class='three'></div>
  <div class='four'></div>
  <div class='five'></div>
  <div class='six'></div>
</div>

CSS

.parent {
    width: 800px;
    height: 450px;
    background-color: #eee;
    padding: 25px;
    margin: 10px auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.parent div {
    background-color: #383838;
}

.parent .one {
    grid-row: 1 / span 3;
}

.parent .two {
    grid-column: 2 / span 3;
    height: 70px;
    align-self: flex-start;
}

.parent .three {
    grid-column: 2 / span 3;
    height: 70px;
    align-self: center;
}

.parent .four {
    grid-column: 2 / span 3;
    height: 70px;
    align-self: flex-end;
}

.parent .five {
    grid-column: 6 / span 1;
    grid-row: 1 / span 3;
}

.parent .six {
    grid-column: 7 / span 3;
    height: 70px;
    align-self: flex-end;
}

.parent::after {
    content: '';
    height: 45px;
    width: 45px;
    position: absolute;
    background-color: #ffb104;
    right: 120px;
    bottom: 37px;
    animation: my-first-move 3s linear both;
}

.parent::before {
    content: '';
    height: 45px;
    width: 45px;
    position: absolute;
    background-color: #ffb104;
    left: 285px;
    top: 37px;
    animation: my-second-move 3s linear 3s;
}

@keyframes my-first-move {
    0% { right: 120px; }

    30% { right: 361px; bottom: 37px; }

    70% { opacity: 1; right: 361px; bottom: 417px; }

    100% { opacity: 0; right: 361px; bottom: 417px; }
}

@keyframes my-second-move {
    0% { left: 285px; top: 37px; }

    10% { left: 44px; top: 37px; }

    20% { left: 44px; top: 225px; }
    
    30% { left: 285px; top: 226px; }
    
    40% { left: 44px; top: 225px; }

    50% { left: 44px;top: 417px; }

    60% { left: 285px; top: 417px; }

    70% { left: 44px; top: 417px; }

    85% { left: 44px; top: 37px; }

    100% { left: 285px; top: 37px; }
}