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:
css.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
:
css.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 */
}
هذا التعديل يجعل الحدود تدور حول مركز الدائرة بدقة، دون تأثير الرمز الخطي الذي يظل ثابتًا في مكانه.