Teach you step by step how to use CSS to create a realistic water ripple effect (with code)-CSS Tutorial-php.cn

In the previous article "Newbie: How to use CSS to create image and text layout (code sharing)", I introduced you how to use CSS to create image and text layout. The following article will introduce to you how to use CSS to achieve a realistic water ripple click effect. Let’s see how to do it together.

Teach you step by step how to use CSS to create a realistic water ripple effect (with code)

There is often such a CSS water ripple effect on web pages. I would like to share with you the renderings. After viewing the effect, let’s study how to achieve it. Let me explain to you the basic process of html css image text layout.

Teach you step by step how to use CSS to create a realistic water ripple effect (with code)

1. First create a new HTML file and define 6 div tags.

Copy after login

2. Set the class of the div box to ".wave" and add absolute positioning of the element to its style setting. The syntax is "position:absolute;left:100px;top:150px"".

Code example

.wave{ position:absolute; top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); }

Copy after login

3. Set the wave title text style to add size and width to

30px, set the height to30px; add a rounded borderborder-radiusattribute to the element.

{ width:30px; height:30px; border-radius:300p }

Copy after login

4. Wave title text style. Add the

backgroundattribute to the inserted image. Set the background image in adivelement.

background:url(图片地址)

Copy after login

5. Wave title text The style uses the

background-attachmentattribute to set it to "fixed (fixed); uses thebackground-positionattribute to set the starting position of the background image.

background-attachment:fixed; background-position:center center

Copy after login

Code effect

Teach you step by step how to use CSS to create a realistic water ripple effect (with code)

6. Set the class of the div box to "wave0-5" and set its style to set the image's

z-indexAttribute; then specify the size of the background image for thebackground-sizeattribute; the animationanimationis bound to a

element, just add sixdiv are stacked together and combined with CSSanimation to make sixdiv appear in sequence.

Code example

.wave0{ z-index:2; background-size:auto 106%; animation:w 1s forwards; } .wave1{ z-index:3; background-size:auto 102%; animation:w 1s .2s forwards; } .wave2{ z-index:4; background-size:auto 104%; animation:w 1s .4s forwards; } .wave3{ z-index:5; background-size:auto 101%; animation:w 1s .5s forwards; } .wave4{ z-index:6; background-size:auto 102%; animation:w 1s .8s forwards; } .wave5{ z-index:7; background-size:auto 100%; animation:w 1s 1s forwards; }

Copy after login

Code effect

Teach you step by step how to use CSS to create a realistic water ripple effect (with code)

7. Through the

@keyframesrules, the animation is created by gradually changing0%is the beginning animation,100%is when the animation is completed. Note: Use theanimationproperty to control the appearance of the animation, and also use the selector to bind the animation.

@keyframes w{ 0%{ top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; } 100%{ top:calc((100% - 300px)/2); left:calc((100% - 300px)/2); width:300px; height:300px; }

Copy after login

Code Effect

Teach you step by step how to use CSS to create a realistic water ripple effect (with code)

ok, the code is completed

Complete code

Copy after login

Recommended learning:

CSS video tutorial

The above is the detailed content of Teach you step by step how to use CSS to create a realistic water ripple effect (with code). For more information, please follow other related articles on the PHP Chinese website!