CSS Gradient Text

Others 2019-08-05 23:50:26 views: null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;

        }
        body{
            display: flex;
        
            align-items:center;
            justify-content:center;
            
        }
        .wrap{
            height: 250px;
            width: 40px;
            line-height: 40px;
            font-size: 30px;
            word-break: break-all;
            word-wrap: break-word;
            background-image: -webkit-linear-gradient(top,#FFFAF0,#FFEC8B 25%,#FFC125 50%,#FFA500 75%,#FF7F24);
            -webkit-text-fill-color:transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 100% 200%;
              -webkit-animation: text-change 2s infinite linear;
        }
        
        @-webkit-keyframes text-change {
             0%{ background-position: 0 0;}
             100% { background-position:0 -100%;} 
        } 
    </ Style > 
</ head > 
< body > 
    < div class = "wrap A" > Text Gradient Test </ div > 
    < div class = "wrap A B" > Text Gradient Test </ div > 
</ body > 
< / HTML >

Guess you like

Origin www.cnblogs.com/tylz/p/11304229.html

CSS Gradient Text

css to achieve text gradient

【CSS】Text gradient color

[CSS Text Gradient, Background Gradient Realization Method]

CSS3 - text background gradient list

【CSS】Text Sweep Light | Gradient Light

Background image positioning, css3 background, css3 color, css text, linear gradient, radial gradient

Gradient CSS linear-gradient

Text color gradient

[Accumulated water into a deep] CSS frosted glass effect and gradient theme color text

css gradient background

css radial gradient

css gradient compatibility wording

css gradient color

Linear gradient css

css color gradient

CSS to achieve gradient background

Css realizes gradient spline

CSS background linear gradient

Border gradient css

CSS Gradient Border

CSS background color gradient

css-border-gradient

CSS realizes gradient color

css linear gradient

CSS box border gradient

CSS: linear-gradient () color gradient background

How to define gradient lines in CSS gradient

Detailed explanation of CSS linear gradient and radial gradient

CSS Gradient Text

Recommended

The number of MaxKB GitHub Stars, an open source knowledge base question and answer system based on large language models, exceeded 5,000!

Ranking

Getting the basic concepts of ROS + catkin Profile

Spring Learning (2) --- Assembling Beans in the IoC Container

js to get the src attribute of the image regularly

STM32 is based on CubeIDE and HAL library basics entry study notes: Bluetooth WIFI STM32 connects to Alibaba Cloud

Short video learning - 3, pandas simple use of pivot_table

Print directory of project configuration log, output log

Understand the difference between vi and vim in Linux in 3 minutes

1 + x certificate Web front-end development HTML5 special exercises

mangodb save and insert the difference

7-1 Family tree processing (50 points) (binary tree solution)

Daily

2024-05-13(8)

2024-05-12(28)

2024-05-11(32)

2024-05-10(34)

2024-05-09(32)

2024-05-08(18)

2024-05-07(34)

2024-05-06(6)

2024-05-05(0)

2024-05-04(18)