这段代码是一个HTML页面，它包含CSS样式，用于创建一个动态的蚂蚁爬行动画。蚂蚁在立方体的表面上爬行，形成一种有趣的视觉效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。
演示效果
HTML&CSS
html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>公众号关注：前端Hardytitle>
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: 30px30px20pxrgba(0, 0, 0, 0.1);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.cubeh1{
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>anttitle>
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>anttitle>
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>anttitle>
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>anttitle>
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: 定义蚂蚁的动画路径，使蚂蚁在立方体表面上爬行。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
