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

How to Enable GPUPDATE When Connected via OpenVPN Client

// Explanation: to prevent locking of processes, we set a proxy batch file (on_connect.bat) to…

PowerShell: Add Network Sites (VLAN) into a Virtual Machine Manager Logical Network

# addVmmNetworkSites.ps1 # version 0.01 # User Defined Variables $networkSites=@( @{ 'newNetworkSitename'="test 1" 'vlanId'=100 'vlanCidr'='192.168.1.0/24'…

JavaScript: Wikipedia Viewer

Demo: Wikipedia Viewer HTML Code: <body><div class="container"> <h1>Wikipedia Search</h1> <p>A Free Code Camp Intermediate Project</p><br/>…
Other project: DragonCoin.com