البرمجة

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

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 */ }

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

زر الذهاب إلى الأعلى