???? ??? ??? ????.

?? CSS? ???? ? ?????? ??? ??? ???????.

? ??????? CSS? ???? ???? ?? ??? ??? ??? ???? ?????. ??? ??, ??, ??? ??, ??? ? ?? ???? ???? ?? ?????.

?? ??? ??? ??? ????: https://codepen.io/venzil/pen/MWNVymY

1??: HTML ?? ??

?? HTML ?? ??? ??? ???? ???.

?? ??? ? ???? ?????. ?? ??? ??(.container), ?(.circle), ? ?? ?? ?(.dot)???.

?? HTML ??? ??? ????.

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

CSS ??

1. ?? ? ??? ?? ??

?? HTML?

??? ?? ???? ???? ??? ??? ?????.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

??? 100vh;? ????

??? ?? ???? ???? ???. ????, flexbox? ???? ???? ?? ? ?? ??? ???? ??? ??? ?????.

?? ?? ???? ??? ?????.

.container {
  background-color: transparent;
  width: 200px;
  height: 200px;
}

2. ? ??? ? ????

? ?? ??? ??? ?? ??? ?? ???? ????. ??? ?? ? ??? ??? ???.

????? ??? ??? ?????. ? ????? ??? ?? ??? ??? ???? ? ?? ??? 200px???.

.container .circle {
  border-color: yellow;
  border-style: solid;
  width: 100%;
  height: 100%;
}

???? border-radius? ???? ???? ??? ????.

.container .circle {
  border-color: yellow;
  border-style: solid;
  width: 100%;
  height: 100%;

  /* new */
  border-radius: 50%;
}

?? ?? ?? ??? ?? ? ???? ???? ?? ???.

.container .circle {
  border-style: solid;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* new */
  border-color: yellow transparent transparent yellow;
  border-width: 3px 3px 0 0;
}

?? ?? ?? ??? ??????? ? ??? ???? ???.

animate?? ????? ???? ???? CSS ????? ????(@keyframes)? ?????.

? ????? ????? ??? ?? ??(?? {}??, ???? ????? ?? ??)?? ? ??(1??? 360?) ?????.

@keyframes animate {
  to {
    transform: rotate(1turn);
  }
}

?? ?? .circle ???? ????? ????? ?????.

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

1. animation: ?? ????? ??, ??, ??? ??, ?? ?? ?? ?? ?? ?? ??? ? ?? ?????? ?? ?????.
2. animate: @keyframes animate ??? ???? ?????? ?????.
3. 3?: ?????? ?? ????, ? ???? ???? ? 3?? ?????.
4. ??: ?????? ??? ???? ???? ?? ?? ??? ??? ???? ?????.
5. ??: ?? ??. ?????? ??? ???? ?????.

??? ???? ??? ?? ????? ??? ?????.

???? ???? ??? ?? ?? ???? ????? ??? ?? ? ????.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

?? ??? ??? ????.

? ??? CSS? ?? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!