背景动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        .shadow {
            position: relative;
            width: 250px;
            height: 250px;
            border: 1px solid #333;
            box-sizing: border-box;
            margin: 50px;
            float: left;
            overflow: hidden;
        }

        .shadow::before {
            content: "";
            position: absolute;
            width: 50px;
            height: 50px;
            top: -50px;
            left: -50px;
            box-shadow: 50px 50px, 150px 50px, 250px 50px, 50px 100px, 150px 100px, 250px 100px, 50px 150px, 150px 150px, 250px 150px, 50px 200px, 150px 200px, 250px 200px, 50px 250px, 150px 250px, 250px 250px;
            animation: move 3s infinite linear;
        }

        @keyframes move {
            25% {
                transform: translate(50px);
                color: coral;
                box-shadow: 50px 50px, 150px 50px, 250px 50px, 50px 100px, 150px 100px, 250px 100px, 50px 150px, 150px 150px, 250px 150px, 50px 200px, 150px 200px, 250px 200px, 50px 250px, 150px 250px, 250px 250px;
            }

            50% {
                transform: translate(0px);
                color: brown;
                border-radius: 0;
                box-shadow: 50px 50px, 150px 50px, 250px 50px, 100px 100px, 200px 100px, 300px 100px, 50px 150px, 150px 150px, 250px 150px, 100px 200px, 200px 200px, 300px 200px, 50px 250px, 150px 250px, 250px 250px;
            }

            75% {
                transform: translate(0px);
                color: teal;
                border-radius: 50%;
                box-shadow: 50px 50px, 150px 50px, 250px 50px, 100px 100px, 200px 100px, 300px 100px, 50px 150px, 150px 150px, 250px 150px, 100px 200px, 200px 200px, 300px 200px, 50px 250px, 150px 250px, 250px 250px;
            }

            100% {
                border-radius: 0%;
                box-shadow: 50px 50px, 150px 50px, 250px 50px, 50px 100px, 150px 100px, 250px 100px, 50px 150px, 150px 150px, 250px 150px, 50px 200px, 150px 200px, 250px 200px, 50px 250px, 150px 250px, 250px 250px;
            }
        }
    </style>
</head>

<body>
    <div class="shadow"></div>
</body>

</html>

 

上一篇:Zabbix分布式监控平台安装部署


下一篇:zabbix agent安装与配置1