🎈 preface

Like + favorites = learned


🐱💻 online

🐱👓 code repository


Let’s take a look at the final result

This effect is very simple, as long as the realization principle should be the idea.




🎗 ️ principle

  1. Define container dimensions
  2. Set the gradient background:background: linear-gradient(...)Set your own angles and colors
  3. Set the background size several times larger than the container:background-size: 600% 600%;
  4. Create a looping animation to control the background movement:background-position




👊 Hands-on implementation

Go directly to the code, and compare the “principle” and comments to believe that you can learn to waste.

<! <div class="gradient"></div> <style>. Gradient {/* set the size of the container - 1 */ width: 400px; height: 400px; /* Linear gradient(-45deg, # EE7752, # e73C7e, #23a6d5, #23d5ab); /* Linear gradient(-45deg, # EE7752, # e73C7e, #23a6d5, #23d5ab); /* Background-size: 600% 600%; /* gradientBG 5s ease infinite; } @frames gradientBG {0% {background-position: 0%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style>Copy the code




🤯 Fantastic idea

In this example, if the animation is not played automatically, the interactive reference frame can be combined with mouse movement.

Control the gradient effect of the background color through the current mouse position.

This is probably a kind of parallax effect, can be combined with the principle of parallax effect and implementation method.