<h3>Hover the box</h3>
<div class="box"></div>

.box {
  --b: 20px;
  
  width: 200px;
  aspect-ratio: 1;
  margin:auto;
  border: 1px solid;
  background:
    conic-gradient(at 50% var(--b),#0000 25%,rgb(0 0 255/50%) 0) calc(50% + var(--_i,50%))/200%,
    conic-gradient(at 50% var(--b),rgb(255 0 0/50%) 75%,#0000 0) calc(50% - var(--_i,50%))/200%;
  transition: .5s;
}
.box:hover {
  --_i: 0%;
}

h3 {
  text-align:center;
  margin:0;
}