div+css模拟蚂蚁爬行飞行动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css模拟蚂蚁爬行飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; min-height: 100vh; filter: invert(100%); overflow: hidden; } .ant { position: absolute; display: flex; align-items: center; transform: scale(0.5); left: 0; } .ant:has(.ant__wing) { transform: scale(0.5) rotate(-20deg); animation: animate-move-with-wings 5s linear infinite; } @keyframes animate-move-with-wings { 0% { left: 0; top: -10%; } 50% { left: 55%; top: 55%; } 90% { left: 100%; top: 50%; } 100% { left: 100%; top: 50%; } } .ant:not(:has(.ant__wing)) { bottom: 0; animation: animate-move-with-legs 10s linear infinite; } @keyframes animate-move-with-legs { 0% { left: -250px; } 100% { left: 100%; } } .ant span { display: inline-block; } .ant__head { width: 70px; height: 60px; border-radius: 50%; border: 2px solid #000; order: 3; } .ant__antennae { position: absolute; height: 20px; width: 30px; border-top: 1px solid #000; border-left: 1px solid #000; transform-origin: 100% 0; transform: skew(-50deg, 30deg); } .ant__antennae--1 { right: -35px; } .ant__antennae--2 { right: -30px; top: 25px; } .ant__thorax { position: relative; width: 80px; height: 60px; border-radius: 50%; order: 2; } .ant__thorax-back { position: absolute; top: 0; left: 0; border-radius: 50%; height: 100%; width: 100%; } .ant__thorax-front { position: absolute; top: 0; left: 0; background-color: #fff; border: 2px solid #000; border-radius: 50%; height: 100%; width: 100%; } .ant__wing { position: absolute; bottom: 100%; left: 20px; width: 60px; height: 150px; border: 1px solid #000; background-color: rgba(0, 0, 0, 0.2); transform-origin: 50% 100%; border-radius: 250% 150% 300% 100%; } .ant__wing--1 { transform: rotate3d(0, 0, 1, -10deg); animation: animate-wing-1 0.2s linear infinite alternate; } @keyframes animate-wing-1 { from { transform: rotate3d(0, 0, 1, -10deg); } to { transform: rotate3d(1, 0, 0, 180deg); } } .ant__wing--2 { transform: rotate3d(0, 0, 1, -30deg); animation: animate-wing-2 0.2s linear infinite alternate 0.1s; } @keyframes animate-wing-2 { from { transform: rotate3d(0, 0, 1, -30deg); } to { transform: rotate3d(1, 0, 0, 180deg); } } .ant__thorax:not(:has(.ant__wing)) .ant__leg { position: absolute; height: 60px; width: 30px; border-top: 1px solid #000; border-left: 1px solid #000; transform-origin: 100% 0; transform: skew(-50deg, 30deg); } .ant__thorax:not(:has(.ant__wing)) .ant__leg--1 { left: -14px; bottom: -55px; } .ant__thorax:not(:has(.ant__wing)) .ant__leg--2 { left: 10px; bottom: -60px; } .ant__thorax:not(:has(.ant__wing)) .ant__leg--3 { width: 24px; left: 40px; bottom: -53px; } .ant__thorax:not(:has(.ant__wing)) .ant__leg--4 { left: -14px; bottom: -55px; } .ant__thorax:not(:has(.ant__wing)) .ant__leg--5 { left: 10px; bottom: -60px; } .ant__thorax:not(:has(.ant__wing)) .ant__leg--6 { width: 24px; left: 40px; bottom: -53px; } @keyframes animate-leg { from { transform: skew(-50deg, 30deg) rotateY(0); } to { transform: skew(50deg, -30deg) rotateY(180deg); } } .ant__thorax:not(:has(.ant__wing)) .ant__leg--1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0