تنفيذ تأثير حركي عند الضغط على زر

Yasmeen Hassan · 10 أبريل 2022

اريد ان يكون بعد الضغط على الزر تبدأ الحركة التالية ؟

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <body>
    <input type="checkbox" id="c">
    <label for="c" id="upload_app">
      
      <div id="app">
        <div id="arrow"></div>
        <div id="success">
          <i class="fas fa-check-circle"></i>
        </div>
      </div>



      <div class="circle">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>


    </label>

  </body>

</body>

</html>

html,
body {
  height: 100%;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  background-color: #f1f2f3;
}

#c {
  display: none;
}

#upload_app {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 120px;
  height: 42px;
  transform: translateY(-50%);
  transition: 0.3s ease width;
  cursor: pointer;
}

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border: 2px solid #143240;
  overflow: hidden;
  z-index: 2;
}

#app:before {
  content: "Upload";
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
  left: 0;
  color: #143240;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  z-index: 1;
}

arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background-color: #fff;
  z-index: 2;
}

#arrow:before,
#arrow:after {
  content: "";
  position: absolute;
  top: 18px;
  width: 10px;
  height: 2px;
  background-color: #143240;
}

#arrow:before {
  right: 17px;
  transform: rotateZ(-45deg);
}

#arrow:after {
  right: 11px;
  transform: rotateZ(45deg);
}

#success {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  margin: -8px;
  background-color: #143240;
  transform: scale(0);
  border-radius: 50%;
  z-index: 3;
}

#success i {
  font-size: 20px;
  color: #fff;
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px auto;
  transform: scale(0);
}

#c:checked + #upload_app {
  width: 42px;
}

#c:checked + #upload_app #arrow:before {
  animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #arrow:after {
  animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
}

#c:checked + #upload_app #success {
  animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;
}

#c:checked + #upload_app #success i {
  animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;
}

@keyframes _a {
  0% {
    top: 18px;
    right: 17px;
    width: 10px;
    transform: rotateZ(-45deg);
    background-color: #143240;
  }
  100% {
    top: 36px;
    right: 19px;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _b {
  0% {
    top: 18px;
    right: 11px;
    width: 10px;
    transform: rotateZ(45deg);
    background-color: #143240;
  }
  100% {
    top: 36px;
    right: 0;
    width: 19px;
    transform: rotateZ(0deg);
    background-color: #ffc107;
  }
}

@keyframes _incHeight {
  0% {
    top: 36px;
    height: 2px;
  }
  25% {
    top: 31px;
    height: 8px;
  }
  50% {
    top: 21px;
    height: 18px;
  }
  80% {
    top: 11px;
    height: 28px;
  }
  100% {
    top: 0;
    height: 39px;
  }
}

@keyframes _success {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/*-------------------------------*/
.circle {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #3a6e9a;
    background-size:contain ;
  }
  
  .circle div {
    position: absolute;
    top: calc((50% - 10px)); /* تبع موقع الدايرة من الصفحة كاملة الي بالبكسل غير مهمة*/
    left: calc((50% - 10px));
    width: 20px;
    height:20px;
    border-radius: 50%;/*هذا والاثنين الي فوقة مقاييس تبع الدايرة*/
    background: #fff;
   
  }
  /*السرعات لي الدوائر*/
  .circle-anim div:nth-child(1) { animation: anim_01 5s forwards;}
  .circle-anim div:nth-child(2) { animation: move_01 5s 2s; }
  .circle-anim div:nth-child(4) { animation: move_03 5s 2s; }
  .circle-anim div:nth-child(3) { animation: move_02 5s 2s; }
  .circle-anim div:nth-child(5) { animation: move_04 5s 2s; }
  
  @keyframes anim_01 {
    0% {   transform: scale(0);}/*الدائرة لمن تصغر*/
    20% {  transform: scale(5);} /*الدائرة لمن تكبر*/
    50% {  transform: scale(3);}/*الدائرة لمن تصغر*/
    90% {  transform: scale(5);}/*الدائرة لمن تكبر*/
    100% { transform: scale(0);}/*الدائرة لمن تصغر*/
  }
  
  @keyframes move_01 {
    0% {   transform: translate(0) scale(0);} /* غير متاكدة حجم الدائرة لمن تخرج من الوسط*/
    /* انتقال الدوائر الصغير ف الارباع المختلفة*/
    20% {  transform: translate(-100px, -100px) scale(1);}
    40% {  transform: translate(-100px, 100px) scale(1);}
    60% {  transform: translate(100px, 100px) scale(1);}
    80% {  transform: translate(100px, -100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_02 {
    0% {   transform: translate(0) scale(0);}
    20% {  transform: translate(-100px, 100px) scale(1);}
    40% {  transform: translate(100px, 100px) scale(1);}
    60% {  transform: translate(100px, -100px) scale(1);}
    80% {  transform: translate(-100px, -100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_03 {
    0% {   transform: translate(0px) scale(0);}
    20% {  transform: translate(100px, 100px) scale(1);}
    40% {  transform: translate(100px, -100px) scale(1);}
    60% {  transform: translate(-100px, -100px) scale(1);}
    80% {  transform: translate(-100px, 100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }
  
  @keyframes move_04 {
    0% {   transform: translate(0px) scale(0);}
    20% {  transform: translate(100px, -100px) scale(1);}
    40% {  transform: translate(-100px, -100px) scale(1);}
    60% {  transform: translate(-100px, 100px) scale(1);}
    80% {  transform: translate(100px, 100px) scale(1);}
    100% { transform: translate(0) scale(1);}
  }

مجلد 1.docx

Yomna Raouf · 10 أبريل 2022

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

 <script>
   // نقوم باختيار العنصر الذي نريد إضافة الصنف له
    const circle = document.getElementsByClassName("circle")[0];

	// نقوم بتعريف دالة يتم استدعائها عند الضغط على الزر و إضافة صنف التحريك للدائرة
    function animateCircle() {
      circle.classList.add("circle-anim")
    }

   // التابع التالي لحذف الصنف المسئول عن تحريك الدائرة
    function removeAnimatation() {
      circle.classList.remove("circle-anim")
    }
  </script>

نقوم باستدعاء الدالة عند الضغط على الزر كما يلي:

<div id="app" onclick="animateCircle();">
  <div id="arrow"></div>
  <div id="success">
    <i class="fas fa-check-circle"></i>
  </div>
</div>

الآن نقوم بتعديل الجزء التالي من الكود و تغيير circle ليصبح اسم الصنف المسئول عن التحريك:

 .circle-anim div:nth-child(1) { animation: anim_01 5s forwards;}
  .circle-anim div:nth-child(2) { animation: move_01 5s 2s; }
  .circle-anim div:nth-child(4) { animation: move_03 5s 2s; }
  .circle-anim div:nth-child(3) { animation: move_02 5s 2s; }
  .circle-anim div:nth-child(5) { animation: move_04 5s 2s; }