sites/animacaoTexto.html at master · dqrtec/sites · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #222;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: montserrat, sans-serif;
        }
        .animacao{
            font-size: 60px;
            font-weight: 900;
            text-decoration: none;
            background: linear-gradient(to right, #CCC 50%, #FF5858 50%, #CC2E5D);
            background-size: 200%;
            -webkit-background-clip: text;
            -webkit-background-color: transparent;

            transition: 0.5s ease-out;
        }

        .animacao:hover{
            background-position: -100%;
        }
    </style>
</head>
<body>
    <div class="animacao">
        Hello, World!
    </div>
</body>