Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS to achieve aircraft porthole style toggle control, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Code interpretation

Define the dom,.windows container to represent the porthole, and its child element .curtain to represent the curtain:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:skyblue

}

Set the size of the porthole, because the font size will be used later, so the font size is defined by a variable:

: root {

-- font-size:10px

}

.window {

Position:relative

Box-sizing:border-box

Width:25em

Height:35em

Font-size:var (--font-size)

Background-color:#d9d9d9

}

Draw thick window frames with shadows:

.window {

Border-radius:5em

Box-shadow:

Inset008emrgba (0Pert 00.2pm)

0000.4em#808080

0004emwhitesmoke

0004.4em#808080

02em4em4emrgba (0. 0. 1)

}

Set the curtain style to the same size as the window, but do not pull it to the end:

.window.curtain {

Position:absolute

Width:inherit

Height:inherit

Border-radius:5em

Box-shadow:

0000.5em#808080

003emrgba (0, 0, 0, 4)

Background-color:whitesmoke

Left:0

Top:-5%

}

Use pseudo elements to draw indicator lights on the curtains and shine red when the curtains are closed:

.window.curtain:: before {

Content:''

Position:absolute

Width:40%

Height:0.8em

Background-color:#808080

Left:30%

Bottom:1.6em

Border-radius:0.4em

}

.window.curtain:: after {

Content:''

Position:absolute

Width:1.6em

Height:0.8em

Background-image:radial-gradient (orange,orangered)

Bottom:1.6em

Border-radius:0.4em

Left:calc ((100%-1.6em) / 2)

}

This is what the porthole looks like when it is closed, and then draw the effect when the porthole is opened.

First add a checkbox to the dom, and when it is checked, the porthole is opened:

Hide the checkbox, use opacity (0) to make the element interact in an invisible state, set its size to be as big as the porthole, and the layer is above the porthole, the result is that when you click on the porthole, you actually click checkbox:

.toggle {

Position:absolute

Filter:opacity (0)

Width:25em

Height:35em

Font-size:var (--font-size)

Cursor:pointer

Z-index:2

}

When the porthole opens, the .curtain moves up and the indicator light is green:

.window.curtain {

Transition:0.5sease-in-out

}

.toggle: checked~.window.curtain {

Top:-90%

}

.toggle: checked~.window.curtain::after {

Background-image:radial-gradient (lightgreen,limegreen)

}

Hide the part beyond the window:

.window {

Overflow:hidden

}

Next, draw the landscape outside the porthole.

Add a .clouds element to dom to represent clouds, and five child elements each represent a white cloud:

Draw the blue sky outside the window with a cloud container:

.window.clouds {

Position:relative

Width:20em

Height:30em

Background-color:deepskyblue

Box-shadow:0000.4em#808080

Left:calc ((100%-20em) / 2)

Top:calc ((100%-30em) / 2)

Border-radius:7em

}

Each cloud consists of three parts, with the largest area drawn first:

.cloudsspan {

Position:absolute

Width:10em

Height:4em

Background-color:white

Top:20%

Border-radius:4em

}

Then draw 2 raised arcs with pseudo elements:

.cloudsspan:: before

.cloudsspan:: after {

Content:''

Position:absolute

Width:4em

Height:4em

Background-color:white

Border-radius:50%

}

.cloudsspan:: before {

Top:-2em

Left:2em

}

.cloudsspan:: after {

Top:-1em

Right:1em

}

Increase the animation of cloud fluttering:

.cloudsspan {

Animation:move4slinearinfinite

}

@ keyframesmove {

From {

Left:-150%

}

To {

Left:150%

}

}

Make some changes in the size and position of each cloud:

.cloudsspan:nth-child (2) {

Top:40%

Animation-delay:-1s

}

.cloudsspan:nth-child (3) {

Top:60%

Animation-delay:-0.5s

}

.cloudsspan:nth-child (4) {

Top:20%

Transform:scale (2)

Animation-delay:-1.5s

}

.cloudsspan:nth-child (5) {

Top:70%

Transform:scale (1.5)

Animation-delay:-3s

}

Finally, hide the contents outside the container:

.window.clouds {

Overflow:hidden

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS to realize the toggle control of plane porthole style" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.