This article mainly introduces an example sharing of using CSS to create graphic deformation pop-up effects. The size of the pop-up window can be modified using jQuery. Friends who need it can refer to it.
Pop-up forms are commonly used on web pages. Interaction design, in this era that focuses on interactive animation experience, web pop-ups can also come up with some fresh ideas, such as the CSS deformation Modal Window shared today.
When the user clicks the button, the button will turn into a full-screen screen and then display the content. The entire display process is smooth and friendly. Maybe you can try it on your new project.
Demo page: http://codyhouse.co/gem/morphing-modal-window/
After clicking the "Fire Modal Window" button, the button will be slow Slowly increases the size until it reaches the entire screen. Here is a GIF demonstration:
Usage Tutorial
This code is compatible with Chrome, Firefox, Safari, Opera, and IE requires version 9.0 or above (IE9)
STEP 1: Create HTML layout
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
STEP 2: Add CSS style
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
STEP 3: Add jQuery
This code uses jQuery. You can modify the window size through the following code.
1 2 3 4 5 6 7 8 9 |
|
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
CSS to achieve the effect of text surrounding images
How to use css3 to implement a circular progress bar
Use CSS3 to write grayscale filters to create black and white photo effects
The above is the detailed content of Create graphic deformation pop-up effect with CSS. For more information, please follow other related articles on the PHP Chinese website!