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

Hyper-V: Creating a New Virtual Machine

# Compulsory variables $hyperVHost='HYPERV007' $vmName='WindowsGoldenImage' $parentDirectory='C:\ClusterStorage\Volume5' $disk1Size='100GB' $memoryAllocation='8GB' $networkSwitch='PublicZone' $vlan='1005' $clusterName='DEV-CLUSTER05' # Optional variables $disk2Size=$false…

Java Virtual Machine Optimal Memory Tuning

Overview: There are five available garbage collectors (GC) for Java Virtual Machines (JVM). Here are…

match

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