FontAwesome Icon Background Animation Effects HTML CSS Animated Background

Nice css effect for site icons and css html animation.

FontAwesome Icon Background Animation Effects HTML CSS Animated Background
HTML CSS Animated Background

This code is rewritten from the video tutorial. Follow the link below to see the author's video and like it if you liked this CSS / HTML
This code may not be accurate with the original from the video.

ICONS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

CSS

*{
margin:0;
padding:0;
}
section{
position:relative;
width: 100%;
height:100vh;
background:#111;
display:flex;
flex-direction: column;
overflow:hidden;
}
section .row{
position:relative;
top:-50%;
width:100%;
display:flex;
padding: 10px 0;
white-space:nowrap;
font-size:64px; 
transform: rotate(-30deg);
}
i{
color: rgba(0,0,0,0.5);
transition:1%;
padding:0 5px;
user-select:none;
cursor:default;
}
i:hover{
transition:0%;
color:#0f0;
text-shadow: 0 0 120px #0f0;
}
section .row div {
animation: animate1 80s linear infinite;
animation-delay:-80s;
}
section .row div:nth-child(2) {
animation: animate2 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate1 {
0% {
transform:translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform:translateX(0%);
}
100%{
transform: translateX(-200%);
}
}
-----

section .row:nth-child(even) div {
animation: animate3 80s linear infinite;
animation-delay:-80s;
}
section .row:nth-child(even) div:nth-child(2) {
animation: animate4 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate3 {
0% {
transform:translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
@keyframes animate4 {
0% {
transform:translateX(-200%);
}
100%{
transform: translateX(0%);
}
}

HTML/CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
section{
position:relative;
width: 100%;
height:100vh;
background:#111;
display:flex;
flex-direction: column;
overflow:hidden;
}
section .row{
position:relative;
top:-50%;
width:100%;
display:flex;
padding: 10px 0;
white-space:nowrap;
font-size:64px; 
transform: rotate(-30deg);
}
i{
color: rgba(0,0,0,0.5);
transition:1%;
padding:0 5px;
user-select:none;
cursor:default;
}
i:hover{
transition:0%;
color:#0f0;
text-shadow: 0 0 120px #0f0;
}
section .row div {
animation: animate1 80s linear infinite;
animation-delay:-80s;
}
section .row div:nth-child(2) {
animation: animate2 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate1 {
0% {
transform:translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform:translateX(0%);
}
100%{
transform: translateX(-200%);
}
}
-----

section .row:nth-child(even) div {
animation: animate3 80s linear infinite;
animation-delay:-80s;
}
section .row:nth-child(even) div:nth-child(2) {
animation: animate4 80s linear infinite;
animation-delay:-40s;
}
@keyframes animate3 {
0% {
transform:translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
@keyframes animate4 {
0% {
transform:translateX(-200%);
}
100%{
transform: translateX(0%);
}
}
</style>
<body>
<section>
 <div class="row">
 
   <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
    <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
   
   </div>
   
    <div class="row">
 
   <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
    <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
   
   </div>
   
    <div class="row">
 
   <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
    <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
   
   </div>
   
    <div class="row">
 
   <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
    <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
   
   </div>
   
    <div class="row">
 
   <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
    <div>
 <i class="fa fa-thermometer-empty" aria-hidden="true"></i>
 <i class="fa fa-ravelry" aria-hidden="true"></i>
 <i class="fa fa-snowflake-o" aria-hidden="true"></i>
 <i class="fa fa-birthday-cake" aria-hidden="true"></i>
 <i class="fa fa-bus" aria-hidden="true"></i>
 <i class="fa fa-credit-card" aria-hidden="true"></i>
 <i class="fa fa-gamepad" aria-hidden="true"></i>
 <i class="fa fa-futbol-o" aria-hidden="true"></i>
 <i class="fa fa-file-image-o" aria-hidden="true"></i>
 <i class="fa fa-cc-paypal" aria-hidden="true"></i>
 <i class="fa fa-money" aria-hidden="true"></i>
 <i class="fa fa-paypal" aria-hidden="true"></i>
 <i class="fa fa-wheelchair-alt" aria-hidden="true"></i>
 <i class="fa fa-hand-o-right" aria-hidden="true"></i>
 <i class="fa fa-bicycle" aria-hidden="true"></i>
 <i class="fa fa-sign-language" aria-hidden="true"></i>
 <i class="fa fa-shower" aria-hidden="true"></i>
   </div>
   
   </div>
    
</section>
</body>
</html>

 


Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz