.tb
p 小蚂蚁
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body
display grid
place-items center
height 100vh
overflow hidden
background-image linear-gradient(#121212,#323232)
.tb
z-index 99
p
display grid
place-items center
font-size 196px
font-family 'Poppins'
font-weight 800
color rgba(255,255,255,.2)
-webkit-text-stroke 3px rgba(200,200,200,1)
filter drop-shadow(8px 8px 2px rgba(0,0,0,1))
position relative
&:after
content '鼠标停下，蚂蚁会跟上来'
font-size 16px
font-family serif
-webkit-text-stroke 0
color #fff
position absolute
font-weight 400
bottom 0
font-family 'Poppins'
svg
filter drop-shadow(2px 2px 1px rgba(0,0,0,.5))
fill rgb(200,50,50)
#tl
transform-origin center right
animation lmove .25s ease infinite alternate
#ml
transform-origin center right
animation lmove .25s .25s ease infinite alternate
#bl
transform-origin center right
animation lmove .25s .45s ease infinite alternate
#tr
transform-origin center left
animation rmove .25s .15s ease infinite alternate
#mr
transform-origin center left
animation rmove .25s .40s ease infinite alternate
#br
transform-origin center left
animation rmove .25s .60s ease infinite alternate
@keyframes lmove
0%
rotate 0
100%
rotate 10deg
@keyframes rmove
0%
rotate 0
100%
rotate -10deg
@media (max-width: 900px)
.tb p
font-size: 98px
.tb p:after
font-size: 8px
const ant = "<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='46' height='73' fill-rule='evenodd' clip-rule='evenodd' image-rendering='optimizeQuality' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' viewBox='0 0 10.12 15.93'><g id='Layer_x0020_1'><path id='tl' d='m4.32 6.76.01.22-1.16-1.27c-.28-.58-.11-1.73-.26-2.2l-.03.06-.06.22-.01.05-.01.04c-.53-.61-.74-.47-1.24-1.11-.27-.35-.14-.36-.47-.33.03.3.67.91.91 1.11.79.65.58.24.71 1.38a2.84 2.84 0 0 0 1.8 2.44l-.19-.61z'/><path id='bl' d='m4.72 9-.01.65c-.61.09-.96.74-2.35 1.35a6 6 0 0 0 .11 1.59c.34 1.49-.43 1.15-.78 2.23-.18.57-.07.81-.48 1.11h-.05c.09-.43.55-1.77.75-2.01.75-.88.07-.82.14-2.36.06-1.25 1.22-1.49 2.34-2.25l.1-.06c.13-.1.1-.07.18-.17L4.72 9z'/><path id='ml' d='M4.31 8.77c.24.08.1.04.26.26.16-.16.24-.29.49-.3l-.45-.36c-1.46.08-2.47-1.1-2.89.95-.21 1.08.32.98-.62 1.56-.31.19-.3.24-.56.49l-.26.25c-.23.24-.15.11-.28.4.37-.07.98-.69 1.26-.98.18-.18.27-.19.44-.34.45-.39.22-.61.38-1.12.06-.2.34-.9.45-1.02.08-.01 1.78.21 1.78.21z'/><path d='M5.46 9.65h-.02l.03.18c.05.36.01.29.46.46.42.17.45.11.65.51.28.56.34 1.35.22 2.01-.16.86-.83 2.02-1.72 2.41v.01l-.01-.01-.01.01v-.01c-.89-.39-1.55-1.55-1.71-2.41a3.33 3.33 0 0 1 .22-2.01c.19-.4.23-.34.65-.51.45-.17.41-.1.46-.46l.03-.18h-.02L4.7 9l.21-.27-.45-.36c.12-.41.14-.52.05-.88l-.02-.11-.01-.01-.19-.61c-.01-.61.01-.77.53-1.08-.84-.04-.54-.04-1.11-.34-.16-1.58.16-1.47.46-2.13-.36-.4-1.34-.19-1.86-.36-.18-.42-.22-.99-.44-1.48S1.36.57 1.27 0c.84.27.92 1.88 1.24 2.64.87.04 1.12.09 1.88.33.23-.48.45-.77.68-.73.24-.04.46.25.69.73.76-.24 1-.29 1.88-.33.32-.76.4-2.37 1.24-2.64-.09.57-.38.88-.6 1.37-.22.49-.27 1.06-.44 1.48-.52.17-1.5-.04-1.87.36.31.66.63.55.47 2.13-.57.3-.27.3-1.11.34.52.31.54.47.53 1.08l-.19.61-.01.01-.02.11c-.09.36-.07.47.05.88l-.45.36.21.27.01.65zm1.5-2.16z' /><path id='tr' d='M5.79 6.76v.22l1.16-1.27c.28-.58.11-1.73.26-2.2l.03.06.06.22.01.05.01.04c.53-.61.73-.47 1.24-1.11.26-.35.14-.36.46-.33-.02.3-.67.91-.9 1.11-.79.65-.58.24-.71 1.38-.22 1.88-1.69 2.4-1.8 2.44l.18-.61z'/><path id='br' d='m5.4 9 .01.65c.61.09.96.74 2.35 1.35.02.54 0 1.08-.11 1.59-.34 1.49.42 1.15.77 2.23.19.57.08.81.49 1.11h.05a9.06 9.06 0 0 0-.75-2.01c-.75-.88-.07-.82-.14-2.36-.06-1.25-1.23-1.49-2.34-2.25l-.11-.06c-.12-.1-.1-.07-.18-.17L5.4 9z'/> <path id='mr' d='M5.81 8.77c-.24.08-.1.04-.26.26-.17-.16-.24-.29-.49-.3l.44-.36c1.46.08 2.47-1.1 2.89.95.22 1.08-.31.98.63 1.56.31.19.3.24.55.49l.27.25c.23.24.15.11.28.4-.37-.07-.98-.69-1.27-.98-.17-.18-.26-.19-.44-.34-.44-.39-.22-.61-.37-1.12-.06-.2-.34-.9-.46-1.02-.07-.01-1.77.21-1.77.21z'/></g></svg>"
// 初始化鼠标位置为屏幕外，表示没有鼠标
let mousex = -1000;
let mousey = -1000;
// 存储所有蚂蚁的数组
const ants = [];
// 蚂蚁的数量
const numAnts = 30;
// 每只蚂蚁的大小（宽度）
const antSize = 20;
// 蚂蚁感知到鼠标的躲避半径
const avoidRadius = 25;
// 蚂蚁跟随鼠标的半径范围
const followRadius = 150;
// 创建蚂蚁的SVG元素并初始化它们的位置和属性
for (let i = 0; i < numAnts; i++) {
// 使用SVG解析器创建一个蚂蚁的SVG元素
const antElem = new DOMParser().parseFromString(ant, 'image/svg+xml').documentElement;
antElem.style.position = 'absolute'; // 设置为绝对定位
antElem.setAttribute('width', `${antSize}px`);
antElem.setAttribute('height', `${(antSize * 73 / 46)}px`); // 保持宽高比
antElem.style.transformOrigin = 'center center'; // 设置旋转中心为元素中心
document.body.appendChild(antElem); // 将蚂蚁添加到页面中
// 初始化每只蚂蚁的属性并存储到数组中
ants.push({
element: antElem, // 蚂蚁的DOM元素
x: Math.random() * (window.innerWidth - antSize), // 随机初始X位置
y: Math.random() * (window.innerHeight - (antSize * 73 / 46)), // 随机初始Y位置
angle: Math.random() * 360, // 随机初始方向（角度）
speed: 1 + Math.random() * 1.5, // 随机速度（1到3之间）
followMouse: false, // 是否跟随鼠标
});
}
// 监听鼠标移动事件，更新鼠标位置
document.addEventListener('mousemove', (event) => {
mousex = event.clientX; // 更新鼠标的X坐标
mousey = event.clientY; // 更新鼠标的Y坐标
});
// 监听鼠标离开页面事件，将鼠标位置重置为屏幕外
document.addEventListener('mouseout', () => {
mousex = -1000;
mousey = -1000;
});
// 更新蚂蚁的位置和行为
function updateAnts() {
ants.forEach((ant, index) => {
let dx = 0; // X方向的移动量
let dy = 0; // Y方向的移动量
// 计算蚂蚁的中心点坐标
const antCenterX = ant.x + antSize / 2;
const antCenterY = ant.y + (antSize * 73 / 46) / 2;
// 计算蚂蚁中心点到鼠标的距离
const distanceToMouse = Math.sqrt(Math.pow(mousex - antCenterX, 2) + Math.pow(mousey - antCenterY, 2));
// 如果鼠标在蚂蚁的跟随半径内
if (distanceToMouse <= followRadius) {
const randomFactor = 0.01 + Math.random() * 0.01; // 随机化移动速度，增加一些随机性
dx = (mousex - antCenterX) * randomFactor; // 向鼠标方向缓慢移动
dy = (mousey - antCenterY) * randomFactor;
ant.angle = Math.atan2(dy, dx) * 180 / Math.PI; // 调整蚂蚁的方向，使其面向鼠标
} else {
// 如果鼠标不在跟随半径内，蚂蚁按自己的方向移动
dx = Math.cos(ant.angle * Math.PI / 180) * ant.speed;
dy = Math.sin(ant.angle * Math.PI / 180) * ant.speed;
ant.angle += (Math.random() - 0.5) * 10; // 随机调整方向，增加一些随机性
}
// 检查与其他蚂蚁的碰撞，避免相互靠近
ants.forEach((otherAnt, otherIndex) => {
if (index !== otherIndex) { // 排除自身
const otherAntCenterX = otherAnt.x + antSize / 2;
const otherAntCenterY = otherAnt.y + (antSize * 73 / 46) / 2;
const dist = Math.sqrt(Math.pow(antCenterX - otherAntCenterX, 2) + Math.pow(antCenterY - otherAntCenterY, 2));
if (dist < avoidRadius) { // 如果距离小于躲避半径
const avoidStrength = (avoidRadius - dist) / avoidRadius; // 计算躲避强度
dx -= (otherAntCenterX - antCenterX) / dist * avoidStrength * 3; // 调整X方向移动量
dy -= (otherAntCenterY - antCenterY) / dist * avoidStrength * 3; // 调整Y方向移动量
}
}
});
// 更新蚂蚁的位置
ant.x += dx;
ant.y += dy;
// 处理蚂蚁碰到屏幕边缘的情况
if (ant.x < 0 || ant.x > window.innerWidth - antSize || ant.y < 0 || ant.y > window.innerHeight - (antSize * 73 / 46)) {
ant.angle += 180; // 转向180度（反向）
// 确保蚂蚁不会卡在边缘外
ant.x = Math.max(0, Math.min(ant.x, window.innerWidth - antSize));
ant.y = Math.max(0, Math.min(ant.y, window.innerHeight - (antSize * 73 / 46)));
}
// 更新蚂蚁的DOM元素位置
ant.element.style.left = `${ant.x}px`;
ant.element.style.top = `${ant.y}px`;
// 计算旋转角度并应用到蚂蚁的DOM元素上
let angle = ant.angle + 90; // 调整旋转角度（假设蚂蚁的默认方向需要偏移90度）
ant.element.style.transform = `rotate(${angle}deg)`;
});
// 使用requestAnimationFrame实现平滑动画
requestAnimationFrame(updateAnts);
}
// 开始更新蚂蚁的位置和行为
updateAnts();