CSS Animation Tutorial: Teach you step-by-step to implement page turning effects, specific code examples are required
CSS animation is an essential part of modern website design. It can add vividness to web pages, attract users' attention, and improve user experience. One of the common CSS animation effects is the page turning effect. In this tutorial, I'll take you step by step to achieve this eye-catching effect and provide specific code examples.
First, we need to create a basic HTML structure. The code is as follows:
In the above code, we create a container with three pages. Each page has a title that displays different content.
Next, we need to write CSS styles. Open a new CSS file and add the following code:
.container { width: 100%; height: 100%; perspective: 1000px; position: relative; overflow: hidden; } .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transition: 1s; } .page1 { background-color: #f8b195; transform: rotateY(0deg); } .page2 { background-color: #f67280; transform: rotateY(-180deg); } .page3 { background-color: #c06c84; transform: rotateY(-180deg); }
In the above code, we set the width and height of the container to 100% to easily adapt to different screen sizes. Then we use the CSS perspective property to create a 3D perspective effect, making the page flip effect more realistic. Set position to relative and overflow to hidden to ensure that page content does not overflow the container.
Next, we set the width, height and positioning of each page, and use the transform-style attribute to maintain the 3D transformation effect, and then use the transition attribute to achieve a smooth transition effect.
In terms of the background color of the page, we set a different color for each page to facilitate distinction.
Now that we have completed the basic HTML structure and CSS style, let’s realize the page turning effect.
Open your CSS file and add the following code:
.container:hover .page1 { transform: rotateY(180deg); } .container:hover .page2 { transform: rotateY(0deg); } .container:hover .page3 { transform: rotateY(180deg); }
In the above code, we trigger the flip effect by using the :hover pseudo-class. When the user hovers the mouse pointer over the container, page 1 will flip 180 degrees, page 2 remains the same, and page 3 flips 180 degrees.
Save your code and refresh the browser. You should now see the three parts of the page flipped.
Through the above tutorial, we successfully implemented a striking CSS page turning effect and provided specific code examples in a step-by-step manner. You can adjust and expand it to suit your needs, adding more pages or more complex effects.
CSS animation is a very important and interesting part of web design, it can add vitality and creativity to your website. I hope this tutorial can be helpful to you and inspire more creativity and inspiration.
The above is the detailed content of CSS Animation Tutorial: Teach you step-by-step to achieve page turning effects. For more information, please follow other related articles on the PHP Chinese website!