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

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

奋力向前

Release： 2021-09-15 18:08:34

Original

4120 people have browsed it

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.

<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>

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 to 30px; add a rounded border border-radius attribute to the element.

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

Copy after login

4. Wave title text style. Add the

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

background:url(图片地址)

Copy after login

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

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

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

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

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




	
	


<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>

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!