تدوير حدود الدائرة بدون تأثير على الرمز الخطي

To rotate only the border of the circle without rotating the font icon, you can use a different approach. Instead of rotating the entire circle using animations, you can create a pseudo-element for the border and rotate it. Here’s how you can modify your CSS:

cssCopy code
.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.circle::before {
  content: "";
  position: absolute;
  top: -2px; /* Adjust this value to keep the border inside the circle */
  left: -2px; /* Adjust this value to keep the border inside the circle */
  width: 104px; /* Adjust this value to include the border width */
  height: 104px; /* Adjust this value to include the border width */
  border-radius: 50%;
  border: 2px dashed #000;
  -webkit-animation: Rotate 2s linear infinite;
  -moz-animation: Rotate 2s linear infinite;
  -ms-animation: Rotate 2s linear infinite;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  font-size: 56px;
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes Rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes Rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

With this modification, the border will rotate while the font icon remains stationary. Adjust the top and left values of the pseudo-element to ensure the border stays inside the circle.

بالتأكيد! يمكنك استخدام خاصية transform-origin لتعديل مكان بداية التحول (الدوران في هذه الحالة) للعنصر الوهمي الذي يمثل الحدود. على سبيل المثال، إذا كان لديك حدود بعرض 2 بيكسل، يمكنك تعيين transform-origin إلى 50% 50% لتأكيد أن الحدود تدور بدقة حول مركز الدائرة. ويمكنك أيضًا تعيين transform-origin إلى قيمة محددة، مثل top left، للتحكم في مكان بداية التحول بشكل دقيق.

تعديل في الكود لإضافة transform-origin:

cssCopy code
.circle::before {
  content: "";
  position: absolute;
  top: -2px; /* Adjust this value to keep the border inside the circle */
  left: -2px; /* Adjust this value to keep the border inside the circle */
  width: 104px; /* Adjust this value to include the border width */
  height: 104px; /* Adjust this value to include the border width */
  border-radius: 50%;
  border: 2px dashed #000;
  -webkit-animation: Rotate 2s linear infinite;
  -moz-animation: Rotate 2s linear infinite;
  -ms-animation: Rotate 2s linear infinite;
  transform-origin: 50% 50%; /* Rotate around the center of the circle */
}

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