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

PowerShell: Outdated Method of Sending Emails

# Credentials section $emailFrom = "[email protected]" $password = "eatYourSalad!" | ConvertTo-SecureString -AsPlainText -Force # plaintext…

PowerShell: How to Create Multiple Arrays or Columns from an Array

# This snippets scans the localhost for common ports and outputs 4 arrays $limitPorts=10000 $netstat=netstat…

Simple Active Directory & DNS Synchronization Script

@echo offGOTO push_or_pull:push_or_pullset /p action="Type in Push, Pull, or Quit. Press Enter for default action…
Other project: DragonCoin.com