Posted On September 7, 2021

CSS: How To Set Color Gradient and Animation to Text and Background

kimconnect 0 comments
blog.KimConnect.com >> Codes >> CSS: How To Set Color Gradient and Animation to Text and Background
// Static color gradient
.colorGradientClass {
    background-color: #ffffff !important;
    background-image: linear-gradient(315deg, #ffffff 0%, #d9d9d9 74%)  !important;
}

// Animated color gradient
.colorTransitionClass {
    background-image: 
        linear-gradient(to right, transparent, white),
        linear-gradient(to right,yellow, white, yellow, white);
    background-size: 100% 100%, 2000% 100%;
    animation: move 5s infinite;
}
@keyframes move {
 from {background-position: center center, left center;}
 to {background-position: center center, right center;}
}

// This will result in blinking text
.blinkingText {
    animation: blinker 5s linear infinite;
    color: red !important;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post

HTML: Basic Anatomy of A Page

Modern browsers discern the type of documents being loaded; thus, it is necessary to tag…

match

- The match() method retrieves the matches when matching a string against a regular expression.…

PowerShell: Generate a CSV Report of O365 Exchange Online Mailboxes

# Office 365 Global Admin Credential$username="[email protected]"$password=ConvertTo-securestring "PASSWORD" -AsPlainText -Force$cred = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList $username,$passwordfunction…