This is my 20th day of the Gwen Challenge

Without saying anything, on the effect:

Premise:

This effect uses a clip-path property to create a clipping region where only part of the element can be shown. However, this property is not very compatible and is not widely supported by all major browsers (such as Firefox and Internet Explorer).

Implementation:

1. Define a box of labels for text:

<body>
   <h1>Night of the Northern Lights</h1>
</body>
Copy the code

2. Color and size the text:

 h1{
        position: relative;
        color: #6b6868;
        font-size: 120px;  
    }
Copy the code

3. Define a double pseudo-element that is text with a gradient color background:

H1 ::after{content: 'Aurora borealis '; top: 0; left: 0; position: absolute; color: transparent; background-image: linear-gradient(to left,rgb(0, 174, 255),rgb(0, 255, 85),rgb(212, 0, 255),rgb(0, 204, 255),rgb(238, 255, 0)); background-clip: text; -webkit-background-clip: text; clip-path: circle(80px at 0% 50%); animation: move 3s linear alternate infinite; }Copy the code

Color: transparent; ~ BACKground-clip: text; -webkit-background-clip: text; Only display color ~ in text

clip-path: circle(80px at 0% 50%); The background capture shows the area as a circle with a radius of 80px and the center of the circle at 0% and 50% ~

4. Animation: it is to constantly change the center position of the circle, and only display the double pseudo-class elements in the circle area, so that the text in the circle has color, and the text outside the circle does not:

@keyframes move{ 0%{ clip-path: circle(80px at 0% 50%); } 100%{ clip-path: circle(80px at 100% 50%); }}Copy the code

Complete code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<style>* {margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: # 070707;
    }
    h1{
        position: relative;
        color: #6b6868;
        font-size: 120px;  
    }
    h1::after{
        content: Night of the Northern Lights;
        top: 0;
        left: 0;
        position: absolute;
        color: transparent;
        background-image: linear-gradient(to left,rgb(0.174.255),rgb(0.255.85),rgb(212.0.255),rgb(0.204.255),rgb(238.255.0));
        background-clip: text;
        -webkit-background-clip: text;
        clip-path: circle(80px at 0% 50%);
        animation: move 3s linear alternate infinite;
    }
    @keyframes move{
        0%{
            clip-path: circle(80px at 0% 50%);
        }
        100%{
            clip-path: circle(80px at 100% 50%); }}</style>
<body>
   <h1>Night of the Northern Lights</h1>
</body>
</html>
Copy the code

Conclusion:

The idea is that you have a layer of default colored text on the bottom layer, and then you have a layer of colored text on top with pseudo-class elements, and then you have a layer of colored text on top of that.

There are more: colorful streamer button ~ 3D stereo album ~