HTML&CSS ：惊爆！蚂蚁爬行秀

前端Hardy
205 阅读4分钟

这段代码是一个HTML页面，它包含CSS样式，用于创建一个动态的蚂蚁爬行动画。蚂蚁在立方体的表面上爬行，形成一种有趣的视觉效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            width: 100vw;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background: #7ae298;
            background: -moz-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
            background: -webkit-linear-gradient(45deg, #7ae298 0%, #9af282 100%);
            background: linear-gradient(45deg, #7ae298 0%, #9af282 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ae298', endColorstr='#9af282', GradientType=1);
        }

        .cube {
            position: relative;
            font-family: 'Oswald', sans-serif;
            width: 250px;
            height: 250px;
            box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
        .cube h1{
            font-size: 24px;
            color: #333;
        }
        .ants {
            fill: black;
            width: 15px;
            height: 25px;
            position: absolute;
        }

        #ant1 {
            left: 50%;
            bottom: -60%;
            animation: ant-1-animation 8s infinite;
        }

        #ant2 {
            left: 0;
            bottom: -50%;
            animation: ant-2-animation 9s infinite;
        }

        #ant3 {
            left: 100%;
            bottom: -70%;
            animation: ant-3-animation 12s infinite;
            animation-delay: 1s;
        }

        #ant4 {
            left: 0;
            bottom: -50%;
            animation: ant-2-animation 12s infinite;
            animation-delay: 3s;
        }

        @keyframes ant-1-animation {
            0% {
                left: 50%;
                bottom: -60%;
            }

            10% {
                left: 50%;
                bottom: 5%;
                transform: rotate(0deg);
            }

            12% {
                left: 50%;
                bottom: 5%;
                transform: rotate(-90deg);
            }

            18% {
                transform: rotate(-90deg);
            }

            20% {
                left: 5%;
                bottom: 5%;
                transform: rotate(-90deg);
            }

            22% {
                transform: rotate(0);
            }

            32% {
                transform: rotate(0);
            }

            38% {
                left: 5%;
                bottom: 87%;
                transform: rotate(90deg);
            }

            50% {
                left: 90%;
                bottom: 87%;
                transform: rotate(90deg);
            }

            55% {
                left: 90%;
                bottom: 87%;
                transform: rotate(230deg);
            }

            72% {
                left: 5%;
                bottom: 5%;
                transform: rotate(230deg);
            }

            78% {
                left: 5%;
                bottom: 5%;
                transform: rotate(90deg);
            }

            85% {
                left: 50%;
                bottom: 5%;
                transform: rotate(90deg);
            }

            90% {
                left: 50%;
                bottom: 5%;
                transform: rotate(180deg);
            }

            100% {
                left: 50%;
                bottom: -60%;
                transform: rotate(180deg);
            }
        }

        @keyframes ant-2-animation {
            0% {
                left: 0;
                bottom: -50%;
                transform: rotate(45deg);
            }

            15% {
                left: 50%;
                bottom: 5%;
                transform: rotate(45deg);
            }

            18% {
                left: 50%;
                bottom: 5%;
                transform: rotate(90deg);
            }

            28% {
                left: 85%;
                bottom: 5%;
                transform: rotate(90deg);
            }

            30% {
                left: 85%;
                bottom: 5%;
                transform: rotate(0deg);
            }

            40% {
                left: 85%;
                bottom: 85%;
                transform: rotate(0deg);
            }

            48% {
                left: 85%;
                bottom: 85%;
                transform: rotate(-90deg);
            }

            58% {
                left: 5%;
                bottom: 85%;
                transform: rotate(-90deg);
            }

            68% {
                left: 5%;
                bottom: 85%;
                transform: rotate(-180deg);
            }

            79% {
                left: 5%;
                bottom: 5%;
                transform: rotate(-180deg);
            }

            81% {
                left: 5%;
                bottom: 5%;
                transform: rotate(-270deg);
            }

            88% {
                left: 50%;
                bottom: 5%;
                transform: rotate(-270deg);
            }

            90% {
                left: 50%;
                bottom: 5%;
                transform: rotate(-140deg);
            }

            100% {
                left: 0%;
                bottom: -50%;
                transform: rotate(-140deg);
            }
        }

        @keyframes ant-3-animation {
            0% {
                left: 100%;
                bottom: -70%;
                transform: rotate(-45deg);
            }

            15% {
                left: 50%;
                bottom: -15%;
                transform: rotate(-45deg);
            }

            18% {
                left: 50%;
                bottom: -15%;
                transform: rotate(-90deg);
            }

            28% {
                left: -10%;
                bottom: -15%;
                transform: rotate(-90deg);
            }

            30% {
                left: -10%;
                bottom: -15%;
                transform: rotate(0deg);
            }

            45% {
                left: -10%;
                bottom: 105%;
                transform: rotate(0deg);
            }

            48% {
                left: -10%;
                bottom: 105%;
                transform: rotate(90deg);
            }

            58% {
                left: 105%;
                bottom: 105%;
                transform: rotate(90deg);
            }

            60% {
                left: 105%;
                bottom: 105%;
                transform: rotate(180deg);
            }

            75% {
                left: 105%;
                bottom: -15%;
                transform: rotate(180deg);
            }

            81% {
                left: 105%;
                bottom: -15%;
                transform: rotate(270deg);
            }

            88% {
                left: 50%;
                bottom: -15%;
                transform: rotate(270deg);
            }

            90% {
                left: 50%;
                bottom: -15%;
                transform: rotate(180deg);
            }

            92% {
                left: 50%;
                bottom: -15%;
                transform: rotate(130deg);
            }

            100% {
                left: 100%;
                bottom: -70%;
                transform: rotate(130deg);
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="cube">
            <h1>爱跑的蚂蚁</h1>
            <svg id="ant1" class="ants" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.39 53.12">
                <title>ant</title>
                <path
                    d="M539.22,398.8a20.17,20.17,0,0,0,3-10.91,14,14,0,0,1,6.22-12.12c.58-.41.56-1.79.6-2.74,0-.18-1-.44-1.53-.61a10.21,10.21,0,0,1-2.52-.74,3.21,3.21,0,0,0-3.17-.18,16.22,16.22,0,0,1-5,.34c-.4,0-.8-.54-1.2-.83l.17-.32c.3.09.6.16.89.27a4.36,4.36,0,0,0,4.08-.16c1.9-1.12,3.92-1.5,5.88.08a8.9,8.9,0,0,0,1.79.86c.43-2.45.07-4.19-1.94-5.61-1.13-.8-1.77-2.3-2.59-3.51a4.82,4.82,0,0,1-.58-1.2c-.89-2.69-3.22-3.93-5.38-5.33a8.47,8.47,0,0,1-.86-.64c-.09-.07-.11-.23-.32-.71.74.37,1.22.58,1.67.83,1.32.74,2.66,1.45,3.92,2.28a3.13,3.13,0,0,1,1,1.45,13.54,13.54,0,0,0,4.09,6l1.88-2.86c-2.65-.24-3.22-1.08-2.51-3.8.22-.86.56-1.68.91-2.71-1.3-.4-2.55-.85-3.83-1.17a3,3,0,0,1-2.21-1.94c-1-2.31-1.82-4.69-3.92-6.3-.13-.1-.11-.38.08-.83.42.31,1,.52,1.24.94,1,1.66,1.92,3.41,3,5.06a5.58,5.58,0,0,0,1.66,1.73,19.86,19.86,0,0,0,2.81,1.25c1,.44,2,.88,3.13.07a1.68,1.68,0,0,1,1.42-.13c1.29.57,2.27-.17,3.4-.52,2.45-.75,4.18-2,4.47-4.76a3.2,3.2,0,0,1,2.11-2.53,3.33,3.33,0,0,1-.26.82,9.36,9.36,0,0,0-2,5,1.67,1.67,0,0,1-1.59,1.65c-1.33.26-2.62.7-3.87,1a38.19,38.19,0,0,1,1.09,4c.36,2.31-.35,3.06-2.8,3l1.91,3a46.1,46.1,0,0,0,3-4.59c.74-1.48,1.2-2.93,3-3.58,1.38-.49,2.57-1.55,4.06-2.15a2.18,2.18,0,0,1-.39.65,8.37,8.37,0,0,1-1.66,1.13c-2.62,1.17-3.78,3.5-4.92,5.91a11.72,11.72,0,0,1-2.19,3.19c-2.42,2.44-2.18,2.73-2,5.77a7.21,7.21,0,0,0,1.52-.72c1.88-1.54,3.86-1.32,5.75-.2a4.4,4.4,0,0,0,4.45.1c.2-.09.41-.15.61-.22l.26.36c-.55.34-1.1,1-1.66,1-1.8,0-3.66.35-5.35-.72a2.33,2.33,0,0,0-1.56.07c-1.22.33-2.43.73-3.63,1.13a1.85,1.85,0,0,0-.86.47c-.28.35.41,3,.78,3.36.79.72,1.59,1.43,2.36,2.18,2.78,2.68,3.25,6.16,3.36,9.75a22.41,22.41,0,0,0,2.87,10.44,1.74,1.74,0,0,1-1.64-1.54c-.86-3.41-2.14-6.72-2.29-10.31-.14-3.25-.56-4.16-1.89-5.52a24.93,24.93,0,0,1-.17,4.45,12.52,12.52,0,0,1-1.68,4.17c-1.53,2.36-4.41,2.28-6-.05-1.85-2.67-2.05-5.66-1.53-8.76.06-.35.16-.69.25-1.07a6.81,6.81,0,0,0-2.94,5.69c-.17,3.81-1.31,7.38-2.26,11A2.54,2.54,0,0,1,539.22,398.8Z"
                    transform="translate(-535.68 -345.68)" />
            </svg>
            <svg id="ant2" class="ants" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.39 53.12">
                <title>ant</title>
                <path
                    d="M539.22,398.8a20.17,20.17,0,0,0,3-10.91,14,14,0,0,1,6.22-12.12c.58-.41.56-1.79.6-2.74,0-.18-1-.44-1.53-.61a10.21,10.21,0,0,1-2.52-.74,3.21,3.21,0,0,0-3.17-.18,16.22,16.22,0,0,1-5,.34c-.4,0-.8-.54-1.2-.83l.17-.32c.3.09.6.16.89.27a4.36,4.36,0,0,0,4.08-.16c1.9-1.12,3.92-1.5,5.88.08a8.9,8.9,0,0,0,1.79.86c.43-2.45.07-4.19-1.94-5.61-1.13-.8-1.77-2.3-2.59-3.51a4.82,4.82,0,0,1-.58-1.2c-.89-2.69-3.22-3.93-5.38-5.33a8.47,8.47,0,0,1-.86-.64c-.09-.07-.11-.23-.32-.71.74.37,1.22.58,1.67.83,1.32.74,2.66,1.45,3.92,2.28a3.13,3.13,0,0,1,1,1.45,13.54,13.54,0,0,0,4.09,6l1.88-2.86c-2.65-.24-3.22-1.08-2.51-3.8.22-.86.56-1.68.91-2.71-1.3-.4-2.55-.85-3.83-1.17a3,3,0,0,1-2.21-1.94c-1-2.31-1.82-4.69-3.92-6.3-.13-.1-.11-.38.08-.83.42.31,1,.52,1.24.94,1,1.66,1.92,3.41,3,5.06a5.58,5.58,0,0,0,1.66,1.73,19.86,19.86,0,0,0,2.81,1.25c1,.44,2,.88,3.13.07a1.68,1.68,0,0,1,1.42-.13c1.29.57,2.27-.17,3.4-.52,2.45-.75,4.18-2,4.47-4.76a3.2,3.2,0,0,1,2.11-2.53,3.33,3.33,0,0,1-.26.82,9.36,9.36,0,0,0-2,5,1.67,1.67,0,0,1-1.59,1.65c-1.33.26-2.62.7-3.87,1a38.19,38.19,0,0,1,1.09,4c.36,2.31-.35,3.06-2.8,3l1.91,3a46.1,46.1,0,0,0,3-4.59c.74-1.48,1.2-2.93,3-3.58,1.38-.49,2.57-1.55,4.06-2.15a2.18,2.18,0,0,1-.39.65,8.37,8.37,0,0,1-1.66,1.13c-2.62,1.17-3.78,3.5-4.92,5.91a11.72,11.72,0,0,1-2.19,3.19c-2.42,2.44-2.18,2.73-2,5.77a7.21,7.21,0,0,0,1.52-.72c1.88-1.54,3.86-1.32,5.75-.2a4.4,4.4,0,0,0,4.45.1c.2-.09.41-.15.61-.22l.26.36c-.55.34-1.1,1-1.66,1-1.8,0-3.66.35-5.35-.72a2.33,2.33,0,0,0-1.56.07c-1.22.33-2.43.73-3.63,1.13a1.85,1.85,0,0,0-.86.47c-.28.35.41,3,.78,3.36.79.72,1.59,1.43,2.36,2.18,2.78,2.68,3.25,6.16,3.36,9.75a22.41,22.41,0,0,0,2.87,10.44,1.74,1.74,0,0,1-1.64-1.54c-.86-3.41-2.14-6.72-2.29-10.31-.14-3.25-.56-4.16-1.89-5.52a24.93,24.93,0,0,1-.17,4.45,12.52,12.52,0,0,1-1.68,4.17c-1.53,2.36-4.41,2.28-6-.05-1.85-2.67-2.05-5.66-1.53-8.76.06-.35.16-.69.25-1.07a6.81,6.81,0,0,0-2.94,5.69c-.17,3.81-1.31,7.38-2.26,11A2.54,2.54,0,0,1,539.22,398.8Z"
                    transform="translate(-535.68 -345.68)" />
            </svg>
            <svg id="ant3" class="ants" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.39 53.12">
                <title>ant</title>
                <path
                    d="M539.22,398.8a20.17,20.17,0,0,0,3-10.91,14,14,0,0,1,6.22-12.12c.58-.41.56-1.79.6-2.74,0-.18-1-.44-1.53-.61a10.21,10.21,0,0,1-2.52-.74,3.21,3.21,0,0,0-3.17-.18,16.22,16.22,0,0,1-5,.34c-.4,0-.8-.54-1.2-.83l.17-.32c.3.09.6.16.89.27a4.36,4.36,0,0,0,4.08-.16c1.9-1.12,3.92-1.5,5.88.08a8.9,8.9,0,0,0,1.79.86c.43-2.45.07-4.19-1.94-5.61-1.13-.8-1.77-2.3-2.59-3.51a4.82,4.82,0,0,1-.58-1.2c-.89-2.69-3.22-3.93-5.38-5.33a8.47,8.47,0,0,1-.86-.64c-.09-.07-.11-.23-.32-.71.74.37,1.22.58,1.67.83,1.32.74,2.66,1.45,3.92,2.28a3.13,3.13,0,0,1,1,1.45,13.54,13.54,0,0,0,4.09,6l1.88-2.86c-2.65-.24-3.22-1.08-2.51-3.8.22-.86.56-1.68.91-2.71-1.3-.4-2.55-.85-3.83-1.17a3,3,0,0,1-2.21-1.94c-1-2.31-1.82-4.69-3.92-6.3-.13-.1-.11-.38.08-.83.42.31,1,.52,1.24.94,1,1.66,1.92,3.41,3,5.06a5.58,5.58,0,0,0,1.66,1.73,19.86,19.86,0,0,0,2.81,1.25c1,.44,2,.88,3.13.07a1.68,1.68,0,0,1,1.42-.13c1.29.57,2.27-.17,3.4-.52,2.45-.75,4.18-2,4.47-4.76a3.2,3.2,0,0,1,2.11-2.53,3.33,3.33,0,0,1-.26.82,9.36,9.36,0,0,0-2,5,1.67,1.67,0,0,1-1.59,1.65c-1.33.26-2.62.7-3.87,1a38.19,38.19,0,0,1,1.09,4c.36,2.31-.35,3.06-2.8,3l1.91,3a46.1,46.1,0,0,0,3-4.59c.74-1.48,1.2-2.93,3-3.58,1.38-.49,2.57-1.55,4.06-2.15a2.18,2.18,0,0,1-.39.65,8.37,8.37,0,0,1-1.66,1.13c-2.62,1.17-3.78,3.5-4.92,5.91a11.72,11.72,0,0,1-2.19,3.19c-2.42,2.44-2.18,2.73-2,5.77a7.21,7.21,0,0,0,1.52-.72c1.88-1.54,3.86-1.32,5.75-.2a4.4,4.4,0,0,0,4.45.1c.2-.09.41-.15.61-.22l.26.36c-.55.34-1.1,1-1.66,1-1.8,0-3.66.35-5.35-.72a2.33,2.33,0,0,0-1.56.07c-1.22.33-2.43.73-3.63,1.13a1.85,1.85,0,0,0-.86.47c-.28.35.41,3,.78,3.36.79.72,1.59,1.43,2.36,2.18,2.78,2.68,3.25,6.16,3.36,9.75a22.41,22.41,0,0,0,2.87,10.44,1.74,1.74,0,0,1-1.64-1.54c-.86-3.41-2.14-6.72-2.29-10.31-.14-3.25-.56-4.16-1.89-5.52a24.93,24.93,0,0,1-.17,4.45,12.52,12.52,0,0,1-1.68,4.17c-1.53,2.36-4.41,2.28-6-.05-1.85-2.67-2.05-5.66-1.53-8.76.06-.35.16-.69.25-1.07a6.81,6.81,0,0,0-2.94,5.69c-.17,3.81-1.31,7.38-2.26,11A2.54,2.54,0,0,1,539.22,398.8Z"
                    transform="translate(-535.68 -345.68)" />
            </svg>
            <svg id="ant4" class="ants" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.39 53.12">
                <title>ant</title>
                <path
                    d="M539.22,398.8a20.17,20.17,0,0,0,3-10.91,14,14,0,0,1,6.22-12.12c.58-.41.56-1.79.6-2.74,0-.18-1-.44-1.53-.61a10.21,10.21,0,0,1-2.52-.74,3.21,3.21,0,0,0-3.17-.18,16.22,16.22,0,0,1-5,.34c-.4,0-.8-.54-1.2-.83l.17-.32c.3.09.6.16.89.27a4.36,4.36,0,0,0,4.08-.16c1.9-1.12,3.92-1.5,5.88.08a8.9,8.9,0,0,0,1.79.86c.43-2.45.07-4.19-1.94-5.61-1.13-.8-1.77-2.3-2.59-3.51a4.82,4.82,0,0,1-.58-1.2c-.89-2.69-3.22-3.93-5.38-5.33a8.47,8.47,0,0,1-.86-.64c-.09-.07-.11-.23-.32-.71.74.37,1.22.58,1.67.83,1.32.74,2.66,1.45,3.92,2.28a3.13,3.13,0,0,1,1,1.45,13.54,13.54,0,0,0,4.09,6l1.88-2.86c-2.65-.24-3.22-1.08-2.51-3.8.22-.86.56-1.68.91-2.71-1.3-.4-2.55-.85-3.83-1.17a3,3,0,0,1-2.21-1.94c-1-2.31-1.82-4.69-3.92-6.3-.13-.1-.11-.38.08-.83.42.31,1,.52,1.24.94,1,1.66,1.92,3.41,3,5.06a5.58,5.58,0,0,0,1.66,1.73,19.86,19.86,0,0,0,2.81,1.25c1,.44,2,.88,3.13.07a1.68,1.68,0,0,1,1.42-.13c1.29.57,2.27-.17,3.4-.52,2.45-.75,4.18-2,4.47-4.76a3.2,3.2,0,0,1,2.11-2.53,3.33,3.33,0,0,1-.26.82,9.36,9.36,0,0,0-2,5,1.67,1.67,0,0,1-1.59,1.65c-1.33.26-2.62.7-3.87,1a38.19,38.19,0,0,1,1.09,4c.36,2.31-.35,3.06-2.8,3l1.91,3a46.1,46.1,0,0,0,3-4.59c.74-1.48,1.2-2.93,3-3.58,1.38-.49,2.57-1.55,4.06-2.15a2.18,2.18,0,0,1-.39.65,8.37,8.37,0,0,1-1.66,1.13c-2.62,1.17-3.78,3.5-4.92,5.91a11.72,11.72,0,0,1-2.19,3.19c-2.42,2.44-2.18,2.73-2,5.77a7.21,7.21,0,0,0,1.52-.72c1.88-1.54,3.86-1.32,5.75-.2a4.4,4.4,0,0,0,4.45.1c.2-.09.41-.15.61-.22l.26.36c-.55.34-1.1,1-1.66,1-1.8,0-3.66.35-5.35-.72a2.33,2.33,0,0,0-1.56.07c-1.22.33-2.43.73-3.63,1.13a1.85,1.85,0,0,0-.86.47c-.28.35.41,3,.78,3.36.79.72,1.59,1.43,2.36,2.18,2.78,2.68,3.25,6.16,3.36,9.75a22.41,22.41,0,0,0,2.87,10.44,1.74,1.74,0,0,1-1.64-1.54c-.86-3.41-2.14-6.72-2.29-10.31-.14-3.25-.56-4.16-1.89-5.52a24.93,24.93,0,0,1-.17,4.45,12.52,12.52,0,0,1-1.68,4.17c-1.53,2.36-4.41,2.28-6-.05-1.85-2.67-2.05-5.66-1.53-8.76.06-.35.16-.69.25-1.07a6.81,6.81,0,0,0-2.94,5.69c-.17,3.81-1.31,7.38-2.26,11A2.54,2.54,0,0,1,539.22,398.8Z"
                    transform="translate(-535.68 -345.68)" />
            </svg>
        </div>
    </div>
</body>

</html>

HTML 结构

  • wrapper: 创建一个类名为“wrapper”的div元素，用于包含整个动画效果。
  • cube: 创建一个类名为“cube”的div元素，用于显示立方体和蚂蚁动画。
  • h1: 显示文本“爱跑的蚂蚁”。
  • 四个svg: 每个svg代表一只蚂蚁，通过id属性区分不同的蚂蚁。

CSS 样式

  • body: 设置页面的溢出、边距、填充和背景色。
  • .wrapper: 设置动画容器的样式，包括显示方式、宽度、高度、对齐方式和背景渐变。
  • .cube: 设置立方体的样式，包括位置、字体、尺寸、阴影和背景色。
  • .ants: 设置蚂蚁的样式，包括填充色、尺寸和位置。
  • #ant1, #ant2, #ant3, #ant4: 分别设置每只蚂蚁的初始位置和动画效果。
  • @keyframes ant-1-animation, @keyframes ant-2-animation, @keyframes ant-3-animation: 定义蚂蚁的动画路径，使蚂蚁在立方体表面上爬行。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

avatar
文章
阅读
粉丝