Background gradient animation effect made by css3

Background gradient animation effect made by css3

Achieve results

Implementation Code

html

<h1 class="text-light">Pure CSS Animated Gradient Background</h1>

<div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
	<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="d-block btn btn-outline-light" download><i class="fas fa-file-download mr-2"></i>Download Source</a>
	<a href="https://manuelpinto.in" target="_blank" class="d-block btn btn-outline-light">Visit my Website<i class="fas fa-external-link-square-alt ml-2"></i></a>
</div>

<h6 class="text-light small font-weight-bold"><i class="fas fa-code"></i> with <i class="fas fa-heart"></i> by Manuel Pinto</h6>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>

CSS3

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

The above is the details of the loading animation effect implemented by CSS3. For more information about CSS3 loading animation, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  Ideas and methods for realizing real-time log reporting with Nginx pure configuration

>>:  How to add vector icons to web font files in web page production

Recommend

Vue implements setting multiple countdowns at the same time

This article example shares the specific code of ...

WeChat applet implements form verification

WeChat applet form validation, for your reference...

A brief discussion on whether too many MySQL data queries will cause OOM

Table of contents Impact of full table scan on th...

Experience of redesigning the homepage of TOM.COM

<br />Without any warning, I saw news on cnB...

Method and introduction of table index definition in MySQL

Overview An index is a table of correspondence be...

Simple example of adding and removing HTML nodes

<br />Simple example of adding and removing ...

Sample code for implementing 3D book effect with CSS

Without further ado, let's take a look at the...

JavaScript generates random graphics by clicking

This article shares the specific code of javascri...

Detailed explanation of the use of Vue mixin

Table of contents Use of Vue mixin Data access in...

A simple way to put HTML footer at the bottom of the page

Requirement: Sometimes, when the page content is ...

Detailed explanation of how to install MariaDB 10.2.4 on CentOS7

CentOS 6 and earlier versions provide MySQL serve...

JS implements request dispatcher

Table of contents Abstraction and reuse Serial Se...

Django online deployment method of Apache

environment: 1. Windows Server 2016 Datacenter 64...

Implementation of nginx proxy port 80 to port 443

The nginx.conf configuration file is as follows u...

Solution to transparent font problem after turning on ClearType in IE

The solution to the transparent font problem after...