HTML-and-CSS-Practice/3.Keyframe_skew.html at master · shantanu-python/HTML-and-CSS-Practice · 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
38
39
<html>
    <head>
        <title>17 jul</title>
        <style>
            .element{
                height: 200px;
                width: 200px;
                display: inline-block;
                background: linear-gradient(180deg,#ff8a00,#e52e71);
                padding: 1px;
                color: white;
                margin-left: 5px;
                margin-right: 5px;
                animation: skew 3s infinite;
                transform: skew(20deg);
                animation-direction: alternate;
                opacity: .8;
            }
            @keyframes skew{
                0%{
                    transform: skew(20deg,20deg);
                }
                100%{
                    transform: skew(-20deg,-20deg);
                }
            }
            body{
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </body>
</html>