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

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.

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.

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

<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>

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);
}

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

30px, set the height to 30px; add a rounded border border-radius attribute to the element.

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

4. Wave title text style. Add the

background attribute to the inserted image. Set the background image in a div element.

background:url(图片地址)

5. Wave title text The style uses the

background-attachment attribute to set it to "fixed (fixed); uses the background-position attribute to set the starting position of the background image.

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

Code effect

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 the background-size attribute; the animation animation is bound to a

element, just add sixdiv are stacked together and combined with CSS animation to make six div 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;
}

Code effect

7. Through the

@keyframes rules, the animation is created by gradually changing 0% is the beginning animation, 100% is when the animation is completed. Note: Use the animation property 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;
  }

Code Effect

ok, the code is completed

Complete code

	
	


<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>

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!