css实现一个非常饿的毛毛虫效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个非常饿的毛毛虫效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: grid; width: 100vw; height: 100vh; place-items: center; } body #caterpillar { width: 400px; height: 400px; } body #caterpillar .segment { offset-path: path("M 60 270 C 140 290 120 200 200 200 C 280 200 240 290 360 270 "); position: absolute; width: 50px; height: 70px; border-radius: 100px/115px; offset-rotate: auto; -webkit-animation: wiggle 3s ease-in-out infinite alternate; animation: wiggle 3s ease-in-out infinite alternate; } body #caterpillar .segment .inner { position: absolute; width: 100%; height: 100%; border-radius: inherit; } body #caterpillar .segment:nth-of-type(9) .legs, body #caterpillar .segment:nth-of-type(10) .legs, body #caterpillar .segment:first-of-type .legs { content: ""; position: absolute; bottom: -15px; filter: none; left: 25px; width: 15px; height: 15px; } body #caterpillar .segment:nth-of-type(9) .legs:before, body #caterpillar .segment:nth-of-type(9) .legs:after, body #caterpillar .segment:nth-of-type(10) .legs:before, body #caterpillar .segment:nth-of-type(10) .legs:after, body #caterpillar .segment:first-of-type .legs:before, body #caterpillar .segment:first-of-type .legs:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-clip-path: polygon(20% 0, 24% 44%, 100% 53%, 100% 92%, 25% 100%, 0 96%, 0 0); clip-path: polygon(20% 0, 24% 44%, 100% 53%, 100% 92%, 25% 100%, 0 96%, 0 0); background: #37501e; transform-origin: top; z-index: 1; -webkit-animation: walk 0.75s ease-in-out infinite alternate; animation: walk 0.75s ease-in-out infinite alternate; transform: rotate(-10deg); } @-webkit-keyframes walk { to { transform: rotate(10deg); } } @keyframes walk { to { transform: rotate(10deg); } } body #caterpillar .segment:nth-of-type(9) .legs:after, body #caterpillar .segment:nth-of-type(10) .legs:after, body #caterpillar .segment:first-of-type .legs:after { left: 20px; top: -5px; width: 90%; background: #1e2b10; z-index: 0; } body #caterpillar .segment:first-of-type .legs { bottom: -12.5px; left: 12.5px; transform: scale(0.9); } body #caterpillar .segment:nth-of-type(1) { offset-distance: 0%; width: 42px; height: 77px; } body #caterpillar .segment:nth-of-type(1) .legs:before { -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } body #caterpillar .segment:nth-of-type(1) .legs:after { -webkit-animation-delay: 0s; animation-delay: 0s; } body #caterpillar .segment:nth-of-type(2) { offset-distance: 10%; width: 44px; height: 79px; } body #caterpillar .segment:nth-of-type(2) .legs:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } body #caterpillar .segment:nth-of-type(2) .legs:after { -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } body #caterpillar .segment:nth-of-type(3) { offset-distance: 20%; width: 46px; height: 81px; } body #caterpillar .segment:nth-of-type(3) .legs:before { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } body #caterpillar .segment:nth-of-type(3) .legs:after { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } body #caterpillar .segment:nth-of-type(4) { offset-distance: 30%; width: 48px; height: 83px; } body #caterpillar .segment:nth-of-type(4) .legs:before { -webkit-animation-delay: -1s; animation-delay: -1s; } body #caterpillar .segment:nth-of-type(4) .legs:after { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; } body #caterpillar .segment:nth-of-type(5) { offset-distance: 40%; width: 50px; height: 85px; } body #caterpillar .segment:nth-of-type(5) .legs:before { -webkit-animation-delay: -1.25s; animation-delay: -1.25s; } body #caterpillar .segment:nth-of-type(5) .legs:after { -webkit-animation-delay: -1s; animation-delay: -1s; } body #caterpillar .segment:nth-of-type(6) { offset-distance: 50%; width: 52px; height: 87px; } body #caterpillar .segment:nth-of-type(6) .legs:before { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } body #caterpillar .segment:nth-of-type(6) .legs:after { -webkit-animation-delay: -1.25s; animation-delay: -1.25s; } body #caterpillar .segment:nth-of-type(7) { offset-distance: 60%; width: 54px; height: 89px; } body #caterpillar .segment:nth-of-type(7) .legs:before { -webkit-animation-delay: -1.75s; animation-delay: -1.75s; } body #caterpillar .segment:nth-of-type(7) .legs:after { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } body #caterpillar .segment:nth-of-type(8) { offset-distance: 70%; width: 56px; height: 91px; } body #caterpillar .segment:nth-of-type(8) .legs:before { -webkit-animation-delay: -2s; animation-delay: -2s; } body #caterpillar .segment:nth-of-type(8) .legs:after { -webkit-animation-delay: -1.75s; animation-delay: -1.75s; } body #caterpillar .segment:nth-of-type(9) { offset-distance: 80%; width: 58px; height: 93px; } body #caterpillar .segment:nth-of-type(9) .legs:before { -webkit-animation-delay: -2.25s; animation-delay: -2.25s; } body #caterpillar .segment:nth-of-type(9) .legs:after { -webkit-animation-delay: -2s; animation-delay: -2s; } body #caterpillar .segment:nth-of-type(10) { offset-distance: 90%; width: 60px; height: 95px; } body #caterpillar .segment:nth-of-type(10) .legs:before { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; } body #caterpillar .segment:nth-of-type(10) .legs:after { -webkit-animation-delay: -2.25s; animation-delay: -2.25s; } body #caterpillar .segment:nth-of-type(11) { offset-distance: 100%; width: 62px; height: 97px; } body #caterpillar .segment:nth-of-type(11) .legs:before { -webkit-animation-delay: -2.75s; animation-delay: -2.75s; } body #caterpillar .segment:nth-of-type(11) .legs:after { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; } body #caterpillar .segment:first-of-type { height: 50px; width: 40px; transform: translateY(10px); filter: hue-rotate(40deg); } body #caterpillar .segment:last-of-type:before, body #caterpillar .segment:last-of-type:after { content: ""; position: absolute; width: 20px; height: 80px; top: -75px; left: 15px; filter: brightness(0.9) hue-rotate(40deg) url(#squiggle); background: linear-gradient(85deg, rgba(255, 255, 255, 0.001) 6px, #3293e2 6px, #3293e2 14px, rgba(255, 255, 255, 0.001) 14px), linear-gradient(-85deg, rgba(255, 255, 255, 0.001) 6px, #3293e2 6px, #3293e2 14px, rgba(255, 255, 255, 0.001) 14px), linear-gradient(to right, rgba(255, 255, 255, 0.001) 30%, #3293e2 30%, #3293e2 70%, rgba(255, 255, 255, 0.001) 70%) 50% 0%/100% 30px no-repeat; border-radius: 50px 50px 5px 5px; transform: rotate(-10deg) scale(0.65); transform-origin: bottom; } body #caterpillar .segment:last-of-type:after { transform: rotate(10deg) scale(0.65); left: 30px; } body #caterpillar .segment:last-of-type .inner { background: linear-gradient(to bottom, #da3743, #bb232e); filter: url(#squiggle) blur(1px); } body #caterpillar .segment:last-of-type .inner:before { content: ""; position: absolute; width: 12.5px; height: 25px; top: 20px; left: 15px; background: #6a9a3a; box-shadow: 0 0 0 4px #d0ff3c, 25px 0 0 -2px #6a9a3a, 25px 0 0 2px #d0ff3c; border-radius: 100%; } body #caterpillar .segment:last-of-type .inner:after { content: ""; position: absolute; width: 10px; height: 10px; left: 30px; top: 50px; background: #196baf; border-radius: 100%; } body #caterpillar .segment:nth-of-type(1) { box-shadow: 0 -3px 5px -4px #d0ff3c; } body #caterpillar .segment:nth-of-type(1):before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; top: -10%; filter: url(#squiggle); background: linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(50% - 1px), #3293e2 calc(50% - 1px), #3293e2 calc(50% + 1px), rgba(255, 255, 255, 0.001) calc(50% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(10% - 1px), #5d8733 calc(10% - 1px), #5d8733 calc(10% + 1px), rgba(255, 255, 255, 0.001) calc(10% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(30% - 1px), #5d8733 calc(30% - 1px), #5d8733 calc(30% + 1px), rgba(255, 255, 255, 0.001) calc(30% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(70% - 1px), #3293e2 calc(70% - 1px), #3293e2 calc(70% + 1px), rgba(255, 255, 255, 0.001) calc(70% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(90% - 1px), #5d8733 calc(90% - 1px), #5d8733 calc(90% + 1px), rgba(255, 255, 255, 0.001) calc(90% + 1px)), radial-gradient(circle at center, #d0ff3c 40%, rgba(255, 255, 255, 0.001) 90%); } body #caterpillar .segment:nth-of-type(1):nth-of-type(3n) { transform: rotate(-1deg); } body #caterpillar .segment:nth-of-type(1):nth-of-type(4n) { filter: hue-rotate(30deg); } body #caterpillar .segment:nth-of-type(1):nth-of-type(5n) { filter: hue-rotate(10deg); } body #caterpillar .segment:nth-of-type(1) .inner { background: #84bb4c; filter: blur(1px); } body #caterpillar .segment:nth-of-type(1) .inner:before, body #caterpillar .segment:nth-of-type(1) .inner:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to bottom, #9dc971, #5d8733); filter: url(#squiggle); box-shadow: inset 0 -30px 30px 0 #37501e; } body #caterpillar .segment:nth-of-type(1) .inner:after { background: repeating-linear-gradient(to right, #90c25f 5px, #d0ff3c 8px, rgba(255, 255, 255, 0.001) 12px, rgba(255, 255, 255, 0.001) 19px, #90c25f 22px); transform: rotate(1.5deg); filter: url(#squiggle) blur(3px); opacity: 0.5; } body #caterpillar .segment:nth-of-type(2) { box-shadow: 0 -3px 5px -4px #d0ff3c; } body #caterpillar .segment:nth-of-type(2):before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; top: -10%; filter: url(#squiggle); background: linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(50% - 1px), #3293e2 calc(50% - 1px), #3293e2 calc(50% + 1px), rgba(255, 255, 255, 0.001) calc(50% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(10% - 1px), #5d8733 calc(10% - 1px), #5d8733 calc(10% + 1px), rgba(255, 255, 255, 0.001) calc(10% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(30% - 1px), #5d8733 calc(30% - 1px), #5d8733 calc(30% + 1px), rgba(255, 255, 255, 0.001) calc(30% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(70% - 1px), #3293e2 calc(70% - 1px), #3293e2 calc(70% + 1px), rgba(255, 255, 255, 0.001) calc(70% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(90% - 1px), #5d8733 calc(90% - 1px), #5d8733 calc(90% + 1px), rgba(255, 255, 255, 0.001) calc(90% + 1px)), radial-gradient(circle at center, #d0ff3c 40%, rgba(255, 255, 255, 0.001) 90%); } body #caterpillar .segment:nth-of-type(2):nth-of-type(3n) { transform: rotate(-2deg); } body #caterpillar .segment:nth-of-type(2):nth-of-type(4n) { filter: hue-rotate(30deg); } body #caterpillar .segment:nth-of-type(2):nth-of-type(5n) { filter: hue-rotate(10deg); } body #caterpillar .segment:nth-of-type(2) .inner { background: #84bb4c; filter: blur(1px); } body #caterpillar .segment:nth-of-type(2) .inner:before, body #caterpillar .segment:nth-of-type(2) .inner:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to bottom, #9dc971, #5d8733); filter: url(#squiggle); box-shadow: inset 0 -30px 30px 0 #37501e; } body #caterpillar .segment:nth-of-type(2) .inner:after { background: repeating-linear-gradient(to right, #90c25f 5px, #d0ff3c 8px, rgba(255, 255, 255, 0.001) 12px, rgba(255, 255, 255, 0.001) 19px, #90c25f 22px); transform: rotate(3deg); filter: url(#squiggle) blur(3px); opacity: 0.5; } body #caterpillar .segment:nth-of-type(3) { box-shadow: 0 -3px 5px -4px #d0ff3c; } body #caterpillar .segment:nth-of-type(3):before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; top: -10%; filter: url(#squiggle); background: linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(50% - 1px), #3293e2 calc(50% - 1px), #3293e2 calc(50% + 1px), rgba(255, 255, 255, 0.001) calc(50% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(10% - 1px), #5d8733 calc(10% - 1px), #5d8733 calc(10% + 1px), rgba(255, 255, 255, 0.001) calc(10% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(30% - 1px), #5d8733 calc(30% - 1px), #5d8733 calc(30% + 1px), rgba(255, 255, 255, 0.001) calc(30% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(70% - 1px), #3293e2 calc(70% - 1px), #3293e2 calc(70% + 1px), rgba(255, 255, 255, 0.001) calc(70% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(90% - 1px), #5d8733 calc(90% - 1px), #5d8733 calc(90% + 1px), rgba(255, 255, 255, 0.001) calc(90% + 1px)), radial-gradient(circle at center, #d0ff3c 40%, rgba(255, 255, 255, 0.001) 90%); } body #caterpillar .segment:nth-of-type(3):nth-of-type(3n) { transform: rotate(-3deg); } body #caterpillar .segment:nth-of-type(3):nth-of-type(4n) { filter: hue-rotate(30deg); } body #caterpillar .segment:nth-of-type(3):nth-of-type(5n) { filter: hue-rotate(10deg); } body #caterpillar .segment:nth-of-type(3) .inner { background: #84bb4c; filter: blur(1px); } body #caterpillar .segment:nth-of-type(3) .inner:before, body #caterpillar .segment:nth-of-type(3) .inner:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(to bottom, #9dc971, #5d8733); filter: url(#squiggle); box-shadow: inset 0 -30px 30px 0 #37501e; } body #caterpillar .segment:nth-of-type(3) .inner:after { background: repeating-linear-gradient(to right, #90c25f 5px, #d0ff3c 8px, rgba(255, 255, 255, 0.001) 12px, rgba(255, 255, 255, 0.001) 19px, #90c25f 22px); transform: rotate(4.5deg); filter: url(#squiggle) blur(3px); opacity: 0.5; } body #caterpillar .segment:nth-of-type(4) { box-shadow: 0 -3px 5px -4px #d0ff3c; } body #caterpillar .segment:nth-of-type(4):before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; top: -10%; filter: url(#squiggle); background: linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(50% - 1px), #3293e2 calc(50% - 1px), #3293e2 calc(50% + 1px), rgba(255, 255, 255, 0.001) calc(50% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(10% - 1px), #5d8733 calc(10% - 1px), #5d8733 calc(10% + 1px), rgba(255, 255, 255, 0.001) calc(10% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(30% - 1px), #5d8733 calc(30% - 1px), #5d8733 calc(30% + 1px), rgba(255, 255, 255, 0.001) calc(30% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(70% - 1px), #3293e2 calc(70% - 1px), #3293e2 calc(70% + 1px), rgba(255, 255, 255, 0.001) calc(70% + 1px)), linear-gradient(to right, rgba(255, 255, 255, 0.001) calc(90% - 1px), #5d8733 calc(90% - 1px), #5d8733 calc(90% + 1px), rgba(255, 255, 255, 0.001) calc(90% + 1px)), radial-gradient(circle at center, #d0ff3c 40%, rgba(255, 255, 255, 0.001) 90%); } body #caterpillar .segment:nth-of-type(4):nth-of-type(3n) { transform: rotate(-4deg); } body #caterpillar .segment:nth-of-type(4):nth-of-type(4n) { filter: hue-rotate(30deg); } body #caterpillar .segment:nth-of-type(4):nth-of-type(5n) { filter: hue-rotate(10deg); } body #caterpillar .segment:nth-of-type(4) .inner { background: #84bb4c; filter: blur(1px); } body #caterpillar .segment:nth-of-type(4) .inner:before, body #caterpillar .segment:nth-of-type(4) .inner:after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; background: l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0