H5、CSS3、JS学习笔记（三）——不规则多边形图片动画

本文链接：https://blog.csdn.net/u014038143/article/details/108811726

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>polygon animation</title>

        <style>
            body {
                font-family: "Poppins", sans-serif;
                background: white;
                color: #aaffff;
            }

            .element {
                /* background-image: url("../img/bk.jpg"); */
                background-color: blue;
                -webkit-clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                height: 350px;
                width: 350px;
                transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
                animation: poly 10s ease-in-out infinite;
            }

            .element:hover {
                filter: hue-rotate(50deg);
            }

            img {
                width: 100%;
                height: 100%;
            }

            @keyframes poly {
                0% {
                    -webkit-clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                    clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                }

                50% {
                    -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 10% 100%);
                    clip-path: polygon(0 0, 100% 35%, 100% 105%, 10% 100%);
                }

                100% {
                    -webkit-clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                    clip-path: polygon(10% 0, 150% 35%, 100% 65%, 0% 80%);
                }
            }
        </style>
    </head>
    <body>
        <div class="element">
            <img src="../img/bk.jpg" alt ="pic" />
        </div>
    </body>
</html>