Hi, I’m Steven.

In this episode we are going to try to implement basic rotatable graphics using only HTML and CSS. Of course there are some missing features, such as not being able to automatically jump, but let’s see how much we can achieve with CSS.

This video version of the tutorial at www.bilibili.com/video/BV1Bt… , welcome the attention of three companies!

Part of the HTML

Open the CodePen editor and first establish the HTML structure. I will use

    to make the rotation diagram and add

      tags. The class is slides. Add 3

    • tags, class is slide, fill 1, 2 and 3 for the three slides respectively.

Part of the CSS

Then go to the CSS section and add the body selector to center the content of the page. This can be done by adding display: flex, context-content and align-items to center and min-height to 100vh.

Then add ul.slides selector and set the style of the rotating diagram container to Position, 600px width, and 280px height. Then unattribute the original list and set list-style to None. Margin and padding are set to 0, and a light grey background is added to make it easy to see how big it is.

Then add Li. slide and set the style of the single wheel image. Margin and padding are set to 0, width and height inherit the size of the parent container, inherit it, and position is set to absolute.

Top and left are set to 0, and now you can see the three numbers overlap.

Slide: nTH-of-type (1), 2, and 3. Set the background color of the first slide as yellow #F2E205, the second as salmon #F25C05, and the third as blue #495F8C.

In the second image, add left: 100%. In the third image, add left: 200%. Now you can see that the three images are horizontally side by side.

Go back to the style Settings of the.slide selector and add display: Flex, context-content and align-items are set to Center, then enlarge the font and color, font family to Helvetica, text size to 120px, and color to white.

Go to the Slides selector and add Overflow: Hidden to hide the highlighted second and third round images.

Realize the round broadcast graph switch

Now that the style is set, the next step is to add a button to switch between the images. This can be done with the form element Radio button in conjunction with a CSS selector.

Going back to the HTML section, add three radio buttons before the

  • tag, with ids control-1, Control-2, and Control-3, which we’ll reference later via

    • Add the input[type=”radio”] selector to the CSS and set position: relative and Z-index: 100, so you can see the Radio button so we can see what’s going on.

    Then we will adjust the three

    Add display: inline-block, set width and height to 10px, background color to white, and rounded corner to 50% to create a circle. Then set the margin to 0 up/down and 3px left/right. Finally, add a white border: 2px solid # FFF.

    Now try clicking on the three labels and see that they can be controlled to the corresponding radio button:

    There are two problems to solve:

    • The first is to adjust being clickedlabelIs displayed as selected
    • Second, it is to carry on the round broadcast graph switch

    All of these can be achieved through CSS selectors.

    Let’s take a look at the HTML structure. The three radio buttons are on the top. This sorting is very important. Then look through the tilde symbol to find the element behind it.

    And since CSS can only find elements in the next layer, not in the previous layer, the radio button is written at the top.

    .slides input[type=”radio”]:nth-of-type(1):checked, if the first radio button is selected, add the ~ tilde symbol and find it in the same layer. .controls-visible label: nth-of-Type (1), select the first label and set background-color to dark gray. Now you can see that when the first label is clicked, the selected style appears:

    Then copy the Settings and set the second and third labels, so that the label is styled.

    Finally, set the effect of rotating image switching and add.slides Input [type=”radio”]:nth-of-type(1):checked, ~ tilde. Slide. This means that after the first radio button is selected, the next three.slide styles will appear. Since we had already aligned the three Slides horizontally, we simply moved the three slides a certain distance to the left in response to the Radio button.

    • When you choose the first oneradioButton when willtransformSet totranslatex(0%).
    • Elected the secondradioButton when willtransformSet totranslatex(-100%), that is, it is moved to the left twice the width, you can display the second round broadcast map.
    • Elected the thirdradioButton when willtranslatex()Set to- 200%That will do.

    Then go back to the.slide selector and add the animation transition, Transition:.5s Transform ease-in-out, and hide the Radio button by setting display to None.

    Let’s look at the completion of this case

    Ok, this is the rotation chart made with pure CSS, you will find that there is no button to jump left and jump right, this part is left for you to try, the principle is similar to the following three labels.

    IO /stevenlei/p…

    As for why there is no automatic jump function, JavaScript should be used here. Although @keyframes can be used to make a timed jump, it cannot match the situation of manual jump. If you find other ways to do it, please leave a message.

    The above, is to use CSS to achieve the effect of all the content of the rotation.

    The source code for this case is at codepen. IO /stevenlei/p…

    Your support is my motivation, please pay attention to CodingStartup at least class, we come together!

    • B station: space.bilibili.com/451368848
    • YouTube: youtube.com/codingstart…
    • The Denver nuggets: juejin. Cn/user / 249773…