0

here is the shape i want to do enter link description here

P.S.I am still learning the front-end stuff so could you pls help me with this assignment.

Here is the HTML code <div>Elzero</div>

here is the CSS code i tried to do with

* {
    box-sizing: border-box;
}

div {
width: 200px;
height: 200px;
background-color: #eee;
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
}

::after {
    content: "";
    width: 200px;
    height: 200px;
    background-color: #03a9f4;
    margin: 80px auto;
    border-radius: 50%;
    position: absolute;
    transform: translate(-190px, -80px);
    z-index: -1;
}

::before {
    content: "";
    width: 200px;
    height: 200px;
    background-color: #e91e63;
    margin: 80px auto;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    z-index: -2;
}

div:hover {
    transition: all 0.5s;
    transform: rotate(180deg);
}
ahmed mazhar
  • 3
  • 2
  • 1
    maybe this answer would be helpful for you: https://stackoverflow.com/questions/38061969/css-make-div-rounded-circle-and-add-border-to-the-3-4-of-it – eligijus puplinskas Oct 23 '21 at 11:19
  • Do you need to investigate CSS animation to get continuous changes as in the GIF or are the changes to be one off e.g. on a hover? – A Haworth Oct 23 '21 at 11:19
  • Have you looked at putting background images on your pseudo elements using say conic-gradients and then animating those? – A Haworth Oct 23 '21 at 13:10
  • Frankly this is not something for divs etc. Use SVG. Simpler all round – Paulie_D Oct 23 '21 at 13:36
  • @AHaworth actually i want to make the shape identical to the GIF just for education purpose. so i don't know how to make this 3/4 circle and when i searched i found out how, but when i make it rotate, it doesn't rotate as a circle you know. (sorry for my bad English Grammar ,I am not that fluent) – ahmed mazhar Oct 23 '21 at 13:50

2 Answers2

0

As you are constrained to use just one div, this snippet builds on your idea of having the pseudo elements but creating them with conic-gradient backgrounds and the 'main' div having the light gray circular background created using a radial gradient. That way it creates these 3 shapes.

enter image description here

and overlays them to give the impression of 3/4 circles. It then uses CSS animation to rotate them on hover.

Obviously you will want to play with the dimensions, the animations timings and directions to get exactly what you want but this should give a start.

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
  margin: 80px auto;
  color: black;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}

div::before {
  content: "";
  width: calc(100% - 10%);
  height: calc(100% - 10%);
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: -1;
  background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}

div:hover::after {
  animation: rot .4s linear;
}

div:hover::before {
  animation: rot .4s linear;
  animation-delay: .1s;
  animation-direction: reverse;
}

@keyframes rot {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(0);
  }
  100% {}
}
<div>Elzero
</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
-1

also here is example in less:

https://codepen.io/nikitahl/pen/XooBXd

if you want to use css here is a converter:

https://jsonformatter.org/less-to-css
eligijus puplinskas
  • 51
  • 2
  • 5