Title: There are two divs as follows:

<div class="radar">
  <div class="fan"></div>
</div>
Copy the code

The radar DIV is 200px wide and the Fan DIV is 100px wide.

Please use CSS to complete the following effect.

🔥 effect compatible with modern mainstream browsers.

I: well! So this is a motion picture of what’s going on, calledUIGive a GIF to complete, this problem has been solved, as clever as I!

Interviewer: Turn left out of the door, thank you!

Back to the point, this topic examines the knowledge point or quite a lot, below we learn a ~

Key frames

The rotation of the sector, the effect of the implementation can be processed through keyframes.

For example, the following keyframe code:

div {
  animation-duration: 3s;
  animation-name: identifier;
  // more code
}
@keyframes identifier {
  from { top: 0; }
  to { top: 100px; }}Copy the code

It takes 3 seconds to change the DIV from 0 to 100px from the top.

Color gradient

The color effect of sector is a linear gradual process, which can be realized by Linear -gradient.

For example:

div {
  background: linear-gradient(to right, white, black);
  // more code
}
Copy the code

DIV background color from left to right, white to black gradient;

Skew function inspection

Of course, you can make scallops to achieve this effect, but the cost is no lower than skew

Now let’s go straight to twisting a square.

// origin
div {
  width: 100px;
  height: 100px;
  background: blue;
}

// after
div {
  width: 100px;
  height: 100px;
  background: blue;
  transform: skew(-10deg);
}
Copy the code

As shown in figure:

::before ::after Pseudo-element

So the question here is very clear, two divs, if you just style the two divs themselves, can you do that?

::before creates a pseudo-element as the first element that matches the selected element.

::after creates a pseudo-element as the last element of the selected element.

The virtual elements ::before and :: After are inline elements by default and are usually added with the Content attribute.

Such as:

div{
  width: 100px;
  height: 100px;
  background: red;
}

div::after {
  width: 100px;
  height: 100px;
  background: blue;
  display: block;
  content: '::after'
}
Copy the code

If you run the code above, you’ll get two divs with red at the top and blue at the bottom, and the following DIV also contains the word ::after.

The box – sizing

There is also a detail to avoid the pit, and how to deal with the details of the frame and frame to look less obtrusive.

We usually use border: 1px solid #eee; Afterward.

Little do they know that the pit was a wave.

After setting the width and height of the div to 50px, add a border around it: 1px solid #eee; In practice, we have set the width and height to 52px.

Use box – sizing: border – box; Can solve this problem;

div {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #eee;
  box-sizing: border-box;
}
Copy the code

The resulting width and height will remain the same, 50px.

Problem implementation code

All right, that’s it. Let’s do what they say. Here is the CSS code:

.radar {
  overflow: hidden;
  position: relative;
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #5ef2ff;
  box-sizing: border-box;
}

.radar::before {
  width: 100px; 
  height: 200px;
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  border-left: 1px solid #5ef2ff;
}

.radar::after {
  width: 200px; 
  height: 100px;
  content: ' ';
  display: block;
  box-sizing: border-box;
  border-bottom: 1px solid #5ef2ff;
}

.fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #5ef2ff;
  width: 100px;
  height: 100px;
}

.fan::after {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  box-sizing: border-box;
  position: relative;
  top: -50%;
  right: -50%;
  transform-origin: 0% 100%;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, transparent, #5ef2ff);
  border-image-slice: 3;
  background: transparent;
  background-image: linear-gradient(to right, transparent, #9bfdfd);
  animation: rotateAnimate 2s linear infinite;
}

@keyframes rotateAnimate {
  from {
    transform: rotate(0deg) skew(-10deg)}to {
    transform: rotate(360deg) skew(-10deg)}}Copy the code

Online Experience AddressTwo divs realize radar scanning effect; Related source code storagewarehouse.

What is your solution to this problem?

Might as well give the message below, learn to share the next ~

Code word is not easy, pass by to a praise 👍 thank you first!

Goi_ = goi_ (goi_ ロ goi_;) ┛

Build your GITHUB business cards and develop simple wechat applets from scratch

For more, head over to Jimmy Github.