This is my 19th day of the Genwen Challenge

First look at the effect:

Clip-path will give a better effect

Principle:

The bottom layer has no color, and the top layer has color. Then the clip-path property is used to capture the top layer and display it

Implementation:

1. Define two identical texts:

<body>
    <h1 class="diyi">Ice~Land</h1>
    <h1 class="dier">Ice~Land</h1>
</body>
Copy the code

2. Give them style:

 h1{
        position: absolute;
        font-size: 5em;
    }
Copy the code

3. Set the underlying text style:

 .diyi{
        -webkit-text-stroke:rgba(79.79.224.7) 2px;
        color: transparent;
    }
Copy the code

-webkit-text-stroke…. : Stroke width and stroke color; color: transparent; Text transparency; 4. Set upper-layer text styles:

 .dier{
        
        color: rgba(29.29.236.1);
        animation: move 3s ease-in-out  infinite;
    }
Copy the code

5. Clip-path clipping is used to display only part of the area, and different contents are clipped at different times to form dynamic effects:

 @keyframes move{
        0%{
            clip-path: polygon(0% 62%.14% 55%.24% 51%.32% 51%.41% 56%.50% 59%.60% 59%.69% 55%.76% 49%.84% 48%.93% 50%.100% 54%.100% 100%.0 100%);
        }
        50%{
            clip-path: polygon(0% 62%.10% 62%.23% 68%.36% 68%.44% 64%.50% 59%.59% 54%.67% 55%.74% 59%.86% 62%.94% 61%.100% 54%.100% 100%.0 100%);
        }
   100%{
            clip-path: polygon(0% 62%.14% 55%.24% 51%.32% 51%.41% 56%.50% 59%.60% 59%.69% 55%.76% 49%.84% 48%.93% 50%.100% 54%.100% 100%.0 100%); }}Copy the code

6. Step 5 can go to a website to dynamically generate the clip-path you want to depict:Here:www.html.cn/tool/css-cl… In this website, directly click cut into what, automatically generated code, very convenient ~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: rgb(12.12.12);
    }
    h1{
        position: absolute;
        font-size: 5em;
    }
    .diyi{
        -webkit-text-stroke:rgba(79.79.224.7) 2px;
        color: transparent;
    }
    .dier{
        
        color: rgba(29.29.236.1);
        animation: move 3s ease-in-out  infinite;
    }
    @keyframes move{
        0%{
            clip-path: polygon(0% 62%.14% 55%.24% 51%.32% 51%.41% 56%.50% 59%.60% 59%.69% 55%.76% 49%.84% 48%.93% 50%.100% 54%.100% 100%.0 100%);
        }
        50%{
            clip-path: polygon(0% 62%.10% 62%.23% 68%.36% 68%.44% 64%.50% 59%.59% 54%.67% 55%.74% 59%.86% 62%.94% 61%.100% 54%.100% 100%.0 100%);
        }
       100%{
            clip-path: polygon(0% 62%.14% 55%.24% 51%.32% 51%.41% 56%.50% 59%.60% 59%.69% 55%.76% 49%.84% 48%.93% 50%.100% 54%.100% 100%.0 100%); }}</style>
<body>
    <h1 class="diyi">Ice~Land</h1>
    <h1 class="dier">Ice~Land</h1>
</body>
</html>
Copy the code

conclusion

Ha ha ~More:Color streamer button.